Hi, My name is Armand, I have been designing sites in my spare time for friends and such for a little while and have decided that I am long, long overdue to move over to CSS for layouts rather than HTML, which I have been using up till now. So I have started a mock project to get me going, but I have a small issue occurring that it seems I may need some help to resolve as I just don't quite yet have the understanding to work out exactly why this is happening. My layout would appear to be working as I anticipated in all browsers except for IE. The central 'main' content area is only aligning to the bottom of my floated left and right columns, rather than sitting in line with them. Sure, I understand that I could manipulate one of the many templates online, but I wanted to write from scratch to gain a better understanding of how this type of site is constructed, but it seems I get stuck very early on in the development I would much appreciate it if there is some guru who might inspect what I have created so far and offer some advice as to what may resolve this issue, and also would appreciate any comments from anyone regarding improvements to my coding as I am a complete newbie to this method it may be I have made some big errors in constructing my script, though I have ensured it validates ok I appreciate any advice and suggestions you might offer me, thank you. My files are attached here in a zip file if that is ok?
If you can upload your website to some online webspace and provide a link, I will be able to help you further. Ant
I got a testing area here... http://www.flyingsaucertesting.co.uk/fscss/index.html ...but how will you see the css? it is all contained in a seperate file, this is called fs.css which is here... http://www.flyingsaucertesting.co.uk/fscss/fs.css Really appreciate any help you can provide and thank you for your time
Your page is working in all the modern browsers so you've done nothing wrong. IE is 11 years behind web standards and the worst browser on the planet. That's why web developers hate it so much and why most of us don't use it as our main browser. What we typically do is check in IE as we're coding to see when IE screws up. The bugs and quirks of IE are well known, as are the hacks to fix it.
but really if a client is using say ie6 and my site doesn't work properly there i think they wont be so happy with it so if I am able to learn how to cope with at least some of it's idiosyncrasies then I would be most grateful for some assistance
Well I would remove the padding from the subcontent div, and add that to float:left; too. Then underneith the three div's, inside the 'content' div put an empty div with style.. clear:both; <div id="content"> <div id="navigation"> </div> <div id="rightcolumn"> </div> <div id="subcontent"> </div> <div style="clear:both;"></div> </div>
Whoa! Careful! The problem is with IE and not his markup! I don't have time to get into the problem but any changes you make, put them in conditional comments for IE and don't make any structural changes.
I wouldn't go that far - there are issues with the markup, though this specific problem may not be directly related to it, it is BAD markup - or at least non-semantic with strong tags for headings, double breaks instead of paragraphs, and flat anchors with inlined styling for what should be a list, ID's on like elements which should probably be done with a class, a lack of dynamic image use meaning future content changes are likely to break the whole layout, and use of multiple images for what could likely be accomplished with just one. ... and the problem is NOT with IE, since I'm getting the SAME broken behavior here in Opera... the problem is with a broken method for trying to make columns! If you dig into the CSS, the problem IS there - and in fact it shouldn't work in any browsers at all since his #subcontent has 216px of PADDING on the sides of a 550px wide element, how exactly are those floats going to end up around a 982px wide element inside a 920px container? SubContent might as well have a clear on it at thath point as the math is all wrong - padding does not ride under floats, nor should it - I'm trying to figure out how in the hell it's rendering properly under FF, and if I was to take a wild guess I'd assume IT is doing something wrong. In general the CSS is absurdly overcomplicated for what is a really simple layout - made all the more simple by the markup being in flow order and not source order. It should be float left, float right, margins on the center. Deviating from that in a flow order design is just asking for it to fail somewhere... The unneccessary elements making it harder to debug - like the hover states for the navigation menu restating values that are already set, or the three #boxes id's that are all getting the same basic formatting data (in which case use a CLASS) Try this on for size, it's a quick rewrite. http://www.cutcodedown.com/for_others/armand0/template.html as with all my examples the directory http://www.cutcodedown.com/for_others/armand0 is unlocked so you can grab the bits and pieces, like new CSS, remastering and recombination of the images so the page only requires TWO images. Valid XHTML 1.0 Strict, would be valid CSS if not for my using zoom to trip haslayout (to wrap floats). I axed the javascript to call the flash because there is no real reason to offload the code for the flash like that - especially if you are going to bother including fallback content (like I did)... View the page with flash off, you'll see what I mean by fallback content. NEVER rely on the end user having flash... Though frankly IMHO using flash for ANYTHING other than games or streaming video is made of miserable ****ING /FAIL/ on websites, but YMMV. Also no need to offload to some crappy javascript to get around an invalid embed, when we can just use a valid one. You'll notice I added a few elements for the 'borders' - I hate adding extra markup but it gives us the advantage of a much more fluid layout than what you had across all elements, and makes it easier to use just two images total instead of the six you were. Less files == less handshaking == faster page loads. In addition to making the 'big' borders dynamic height, I also adjusted what were #boxes (now just .box) to the same behavior. Meant an extra element to draw the bottom, but worth it since you would never have to worry about them breaking if the content height got taller than your drawn picture. I also switched to %/EM instead of px. PX fonts for content has ALWAYS been made of fail, making websites a pain in the ass for large font/120dpi viewers - like myself. While browsers like Opera with the superior zoom functionality makes it less of a pain, I come across a site I have to zoom in to use, I find another website. PX fonts are a neccesary evil when interfacing with images on things like menu buttons or over a fixed background - they are also an accessability /FAIL/ that has no business being used on the CONTENT of a web page. Some other advice? Take an axe to going completely fixed width. Maybe 200 bytes more markup and 2k more CSS and you could go fluid or at least semi-fluid, though that may mean axing the flash animation (No loss in my book)... You aren't 800 friendly (despite all the wild bullshit claims of not having to bother with that resolution, tell it to people like me who run the browser at HALF my screen width of 1920, or all the people with first gen netbooks with the 800x480 displays) and even 920px is a 'crappy little stripe' on the current generation of 1440 and 1920 displays should the user maximize. Even semi-fluid would feel more professional - the CSS I've given you could easily be modified to work - one extra sandbag div inside the 'border' divs, one extra wrapping DIV around the areas that have sidebars, apply sliding doors and good to go. In any case hope this helps, or at least gets you thinking different directions in layout. You basically overthought your CSS for the columns - a fairly easy thing to do.
Death Shadow, Wow, many many thanks for all your comments and time that you have spent on this for me, I appreciate it very much. I feel I must ask you to bear with me though as this was my first ever attempt at trying to use css for a layout and I am just naeive as to the semantics of coding this way, I will go through what you have written here step by step and try and make sense of things I don't wholly understand at this time. Also this is/was just a project to learn how things work and are integrated, so yes i hadn't got round to assigning classes rather than ID's to duplicated elements at the time I had posted and many other things as you can see are clearly incomplete, but that was really because I had encountered a problem before it was really worth taking and developing things much further until I had resolved the more basic problem. The flash thing again was just to include as many different things as I maybe asked to include in a site i may get asked to do, so was just a way to incorporate it rather than it having any purpose, this is just as I have said a learning project not an actual site Now I feel in a much better position to develop this and again I wish to thank you so much for all your help.