http://www.car-chargers.co.uk/ I cant get my content div to line up next to my other divs! It works perfectly in IE7 and its doing my head in! I haven't specified a width on the content div as the site is supposed to be fluid and my CSS skills are fairly weak and I only use simple codes (only been doing css a few months, im a designer by trade not a coder!) Anyone have any ideas? Cheers in advance!
First off, your code does not validate. Having valid code goes a long way towards ensuring the same view in all browsers. Adding a width to your #content div will prevent it from being 100% of the width of the window, and then floating down below the manufacturers section. For a fluid width, I'd suggest using % to specify width on the #content, #manufacturers and all of their padding and margin. Good try for starting to work with CSS. Two tips for you: 1. Develop in a standards compliant browser such as Firefox, and then patch your pages for IE. 2. Use fewer divs and more semantic elements like h1 and ul.
The Crusty Old Guys here tell everyone to test in all browsers from the beginning, but I'm on a Linux machine and find myself building the very basic boxes while looking in FF, and then after the BASIC basic part is finished, uploading it to the server and looking in Opera, IE7 and 6 while continuing. I don't really start flipping through browsers like mad until i'm making finishing touches though.
The code doesnt validate as im using a css hack for IE6 as it has issues reading margin-left. So the best thing for me to do is % on widths?
Well, you could have width: 100%; but you can validate code with a hack or two still in it. First, remove the space at the top. A space between the top of the page and the Doctype means the first thing IE sees is /newline. I advise you to not use loose for your page style. Learn the different things for Strict and use that. It's a bit more work at first to learn, but you said you were new to coding so it's better to learn the so-called "right" way to code... keeps you from getting any bad habits : ) I'm not sure what you mean by not lining up... What I see in FF1.5 on Linux is that the left side doesn't look aligned, meaning the top image and middle part with the clickie menu look okay, but the footer part seems to stick out further to the left. Contact Us doesn't fit in the box, and I can only highlight it when I mouse over US. Also, there is nothing in the title. I know not having title at all makes the page not validate as the validator thinks the head isn't closed... with an empty one, I dunno. You have lots and lots of divs, and you probably don't need quite so many, which will make it easier to find problems later (they will surely come, no-one escapes them). Percents are certainly flexible. There are a couple of IE bugs with this, and I can't remember fully what they all are. Something like height and width are sometimes interpreted as min-height and min-width. Or maybe that was only height. I haven't run across it in my pages yet. Are you using _margin-left for IE? Lastly, I like the top part of the page, it looks really cool.
After looking again, I see why you have so many divs, but there are ways around this surely. First, if the top image is a flexible width but a set height, you can merge some of the images together, like the far-right and top right images. Also, you should have an h1 inside (or behind) the main image so there's at least something to read on the page. The h1 can have a <span>inside or after it with an image on it as well. In fact, why don't you have 2 images-- the left side (with the yellow board and the highway image) and the right side which would also contain the middle part where it looks mostly the same. Make the original image very wide-- wide enough to cover a large possible screen resolution. Then use Sliding Doors to merge the two images... the fact that the right one is very wide means that as the screen gets wider (from person to person), there is always more of the middle part to fill the header up. You are also using images for borders... is it possible to make borders say on the top or bottom and then background images for the rounded corners alone? That also would save you a bunch of divs.