Beginner at CSS - getting layout problems

Paranoimia · 02-05-2006, 02:18 AM

Hi all - I'm new to these forums, and I do hope someone can offer some assistance!

I'm attempting a CSS layout for the first time, and while I've got pretty much what I want displaying in IE, my layout seems to break when viewed in any other browser... and I can't for the life of me figure out why!

This is what I currently have (best to look at it in IE first): http://paranoimia.co.uk/css-index.html

When viewed in another browser, the problems are:

1. The Google search box loses its border (which I believe moves somewhere under the main content in the left column).

2. The right column with the adverts breaks after the Google search box and wraps under the main content column on the left.

I've tried putting a 'float: right' in the definition for the right column, and this works as far as keeping everything in the right column; the problem then becomes that the content wrapper appears to shrink to only include the logo, Amazon advert and Navbar, with both left and right columns jumping out of the wrapper and appearing immediately below it.

I'm obviously missing something, but I can't figure out what it is. Any help/advice would be greatly appreciated.

drhowarddrfine · 02-05-2006, 02:33 AM

Quote:

I've got pretty much what I want displaying in IE

And there's your problem. IE is bug-ridden and non-compliant. It has not had an upgrade, except for security, since 2001. It can't run CSS or DOM elements set in 1998. OTH, Firefox/Opera/Safari are pretty much up to date. So you designed using IE and wonder why it doesn't work in the modern browsers? (I'm not ragging on you but trying to emphasize the point.)

Always, always use a modern browser to test your code in. After you get that working, then adjust your code for IEs quirks and bugs. I can guarantee your problems are caused by IEs faults no matter that it appears to work in that browser now.

BTW, validate your code. You have over 40 errors, many of which are generated by not having an ending meta tag.

Paranoimia · 02-05-2006, 04:14 AM

Thanks for the input.

I've been told to develop for FF first by someone else, and in future I will. I appreciate that IE is out of date and has many faults. I also appreciate that I'm a beginner at all this, and that others know far more than me. However, that doesn't change the fact that IE does at least display the page in the manner in which I'd expect.

But even forgetting the IE side, I am trying to develop this layout for FF now and can't get the layout working - I've tried re-doing the CSS from scratch, adding just the bare-bones of the layout with nothing fancy, and still get the same problems in everything but IE, hence the original question.

I've rectified the meta tag issue now, and the only errors I get from the validator at W3C.org are caused by the doctype references (which were inserted by Dreamweaver) and the various pieces of third-party code, which I'm obliged not to modify by the various UA's.

drhowarddrfine · 02-05-2006, 04:23 AM

Well, Dreamweaver is so good that it's not using proper script attributes and leaving end tags out of other elements. Let's see what we can do about this mess but it's almost bedtime for me.

drhowarddrfine · 02-05-2006, 04:46 AM

Part of the problem is you have ended your right hand column div too early. Remove the closing div tag where it says "End of Google search code" and stick it closer to the bottom where it says "End of right hand column". This will make your borders reappear partially. I think you may have further problems making sure your content is completely in the right hand div.

02-05-2006, 02:18 AM	PM User \| #1
Paranoimia New to the CF scene Join Date: Feb 2006 Posts: 4 Thanks: 0 Thanked 0 Times in 0 Posts	Beginner at CSS - getting layout problems Hi all - I'm new to these forums, and I do hope someone can offer some assistance! I'm attempting a CSS layout for the first time, and while I've got pretty much what I want displaying in IE, my layout seems to break when viewed in any other browser... and I can't for the life of me figure out why! This is what I currently have (best to look at it in IE first): http://paranoimia.co.uk/css-index.html When viewed in another browser, the problems are: 1. The Google search box loses its border (which I believe moves somewhere under the main content in the left column). 2. The right column with the adverts breaks after the Google search box and wraps under the main content column on the left. I've tried putting a 'float: right' in the definition for the right column, and this works as far as keeping everything in the right column; the problem then becomes that the content wrapper appears to shrink to only include the logo, Amazon advert and Navbar, with both left and right columns jumping out of the wrapper and appearing immediately below it. I'm obviously missing something, but I can't figure out what it is. Any help/advice would be greatly appreciated.

02-05-2006, 04:23 AM	PM User \| #4
drhowarddrfine Senior Coder Join Date: Oct 2005 Posts: 1,179 Thanks: 0 Thanked 48 Times in 47 Posts	Well, Dreamweaver is so good that it's not using proper script attributes and leaving end tags out of other elements. Let's see what we can do about this mess but it's almost bedtime for me. __________________ IE8 is 12 years behind today's standards. Security experts say don't use IE.

02-05-2006, 04:46 AM	PM User \| #5
drhowarddrfine Senior Coder Join Date: Oct 2005 Posts: 1,179 Thanks: 0 Thanked 48 Times in 47 Posts	Part of the problem is you have ended your right hand column div too early. Remove the closing div tag where it says "End of Google search code" and stick it closer to the bottom where it says "End of right hand column". This will make your borders reappear partially. I think you may have further problems making sure your content is completely in the right hand div. __________________ IE8 is 12 years behind today's standards. Security experts say don't use IE.

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

02-05-2006, 04:14 AM	PM User \| #3
Paranoimia New to the CF scene Join Date: Feb 2006 Posts: 4 Thanks: 0 Thanked 0 Times in 0 Posts	Thanks for the input. I've been told to develop for FF first by someone else, and in future I will. I appreciate that IE is out of date and has many faults. I also appreciate that I'm a beginner at all this, and that others know far more than me. However, that doesn't change the fact that IE does at least display the page in the manner in which I'd expect. But even forgetting the IE side, I am trying to develop this layout for FF now and can't get the layout working - I've tried re-doing the CSS from scratch, adding just the bare-bones of the layout with nothing fancy, and still get the same problems in everything but IE, hence the original question. I've rectified the meta tag issue now, and the only errors I get from the validator at W3C.org are caused by the doctype references (which were inserted by Dreamweaver) and the various pieces of third-party code, which I'm obliged not to modify by the various UA's.