If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Layout Issues in CSS? ...

Hi Folks,

I started working on a "refurb" over the last month, as I am new to CSS (all previous web stuff built in table structures). I tried the validator, which threw up a couple of float errors, so I fixed them first, before creating this topic.

Now ... I had a go at rebuilding our home page using CSS, which was going quite well in my HTML editor (preview) .. but once I went live (temp file of course) ... it looked a complete mess. Funny thing was, with Compatibility Mode switched on in IE, all looked fine, as I viewed in editor while coding, but in normal IE mode or other browsers, such as Firefox, Chrome etc, it looks a complete mess!!!!

I am sure it's my lousy beginner's approach, but some direction where I am fundamentally going wrong would be greatly appreciated (please go easy on my 'far from perfect' coding with CSS)

I mainly ran the CSS validator, as this is the area of coding I am trying to learn. I know the HTML valildator typically throws up a ton of errors, which I normally fix closer to completion of each individual web page.

On the CSS front, I tried to reduce the width of both sets of column divs, but no joy, as the right hand divs are still jumping out of position at the bottom of the page. For stacking left hand column divs, it was suggested to me to use the "clear: all" tag, which worked well, but I am now wondering if that is part of the issue, causing other left hand column divs to jump out of position (rather than landing side by side horizontally?)

Anyway, thanks for your input - looks like I have lots more headscratching and testing to do.

It's no good having valid CSS which is working with invalid HTML. It's bound to cause issues. I think you should get both your HTML and CSS as near to validity as possible then at least you know it isn't down to a coding error.

I certainly will run a pass with the HTML validator and understand which tags/routines need to be addressed. Once I have everything in place, I will then proceed to re-work all our site pages. At this point, getting my head around CSS (Divs) is the key focus, then everything else will be approached.

This is where I am now ... 32 Errors & 3 Warnings. All that's left is iframes and flash elements, which kick up around 7-10 errors per line. I now know that iframes and Flash export HTML don't work with XHTML Strict Doctypes, so, if I manage to correct them, I am sure I will be down to around 8-10 unique code/tag errors.