11 replies [Last post]
byates
Offline
newbie
Lancaster
Last seen: 12 years 33 weeks ago
Lancaster
Joined: 2007-02-05
Posts: 10
Points: 0

Hi guys,

I have created the following site which is sitting on a test server. It works fine in IE6, but when viewed in FireFox (2.Innocent there are some problems with the layout.

http://www.lmc.ac.uk:82/

The main problem is with the central content div (which I have coloured blue). FF is forcing the first image beneath the left and right columns and out of the div it is coded to sit in, but in IE it sits at the top fine.

Also the div background images aren't showing up, and the sub menus don't sit flush with the main menu.

I would appreciate any advice please.

Here is the css:

body { margin:20px; padding:0px; font-family:arial, helvetica, sans-serif; color:#000; background-color:#CCC; font-size: small; line-height:130%; text-align: center; } h1 { margin:0px; font-size:30px; line-height:30px; font-weight:normal; padding-top: 15px; } h2 { margin:0px 0px 16px 0px; font-size:x-large; line-height:130%; } h3 { margin:0px 0px 16px 0px; font-size:medium; line-height:130%; font-weight:bold; } hr { border: 0; color: #666; background-color: #666; height: 1px; width: 100%; text-align: left; clear: both; } p { margin:0px 0px 16px 0px; } ul { list-style-type: disc; } ol { list-style-type: lower-roman; } li { padding-bottom: 6px; } a { color:#000; text-decoration:underline; font-weight:bold; } a:link { color:#000; } a:visited { color:#000; } a:hover { color: #0000FF; } .top { vertical-align: top; } #main { padding:0px; background-color: #FFF; width: 805px; text-align: left; margin-right: auto; margin-left: auto; } #header { margin:0px; height:81px; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #000; position: relative; top: 0px; width: 805px; } #title { padding:10px 180px 0px 205px; } #logo_left { position: relative; left: 10px; top: 10px; width: 165px; float: left; } #logo_right { position: relative; right: 5px; top: 20px; width: 125px; float: right; } #content { position: relative; top: 15px; left: 15px; margin-right: 185px; width: 415px; padding: 0px; background-color: #33CCFF; } html>body #content { position: relative; left: 205px; padding-bottom: 15px; } #content_wide { position: relative; top: 15px; left: 15px; width: 585px; padding: 0px; } html>body #content_wide { position: relative; left: 205px; padding-bottom: 15px; } #content table { border-bottom: 1px dotted #CCC; border-left: 1px dotted #CCC; margin-bottom: 10px; } #content_wide table { border-bottom: 1px dotted #CCC; border-left: 1px dotted #CCC; margin-bottom: 10px; } #content td { padding: 5px 10px; border-top: 1px dotted #CCC; border-right: 1px dotted #CCC; } #content_wide td { padding: 5px 10px; border-top: 1px dotted #CCC; border-right: 1px dotted #CCC; } #content img { border: 0px; } #welcome { background-attachment: fixed; background-image: url("/images/backgrounds/welcome.gif"); background-repeat: no-repeat; position: relative; left: 0px; top: 0px; width: 415px; } #welcome p { font-size: 30px; font-weight: bold; line-height: 36px; padding-top: 5px; padding-right: 0px; padding-bottom: 0px; padding-left: 5px; color: #FFF; } #y1619 { background-attachment: fixed; background-image: url("/images/backgrounds/1619.gif"); background-repeat: no-repeat; position: relative; left: 0px; top: 0px; float: left; width: 200px; } #y1619 p { font-size: 16px; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 5px; } #y1619 a { color:#FFF; text-decoration:none; font-weight:bold; } #y1619 a:hover { color: #0000FF; } #adult { background-attachment: fixed; background-image: url("/images/backgrounds/adult.gif"); background-repeat: no-repeat; position: relative; right: 0px; top: 0px; float: right; width: 200px; } #adult p { font-size: 14px; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 5px; } #adult a { text-decoration:none; font-weight:bold; } #open { background-attachment: fixed; background-image: url("/images/backgrounds/open.gif"); background-repeat: no-repeat; position: relative; left: 0px; top: 0px; float: left; width: 200px; } #open p { font-size: 14px; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 5px; line-height: 30px; } #open a { color:#FFF; text-decoration:none; font-weight:bold; } #open a:hover { color: #E91521; } #business { background-attachment: fixed; background-image: url("/images/backgrounds/business.gif"); background-repeat: no-repeat; position: relative; right: 0px; top: 0px; float: right; width: 200px; } #business p { font-size: 14px; padding-top: 15px; padding-right: 0px; padding-bottom: 5px; padding-left: 5px; line-height: 30px; } #business a { color:#FFF; text-decoration:none; font-weight:bold; } #business a:hover { color: #8099B3; } #left_col{ position: relative; left: 0px; top: 15px; width: 190px; float: left; } #menu { position: relative; top: 0px; left: 0px; width: 190px; background-color: #EAEAEA; } #options { position: relative; left: 15px; top: 15px; width: 175px; padding-bottom: 15px; } #right_col { position: relative; right: 0px; top: 15px; width: 165px; float: right; padding-bottom:15px; } #right_col p { line-height: 120%; margin-bottom: 10px; } #right_col img { border: 0px; } #news { position: relative; right: 0px; top: 0px; width: 150px; } #news p { padding-bottom: 5px; } #news a { text-decoration:none; color: #666666; } #news a:hover { color: #0000FF; } #notice { position: relative; right: 0px; top: 15px; width: 150px; margin-bottom: 25px; } #footer{ TEXT-ALIGN: center; margin-top: 15px; bottom: 0px; position: relative; font-size: small; line-height: 130%; height: 30px; width: 805px; border-top-width: 1px; border-top-style: solid; border-top-color: #EAEAEA; clear:both; } #footer a { font:bold small/130% arial, helvetica, sans-serif; text-decoration:none; } .small { font-size: 11px; line-height: 130%; } .black_tab { font-weight: bold; color: #FFF; background-color: #666; } .lblue_tab { font-weight: bold; background-color: #72C7E6; } .navy_tab { font-weight: bold; color: #FFF; background-color: #013378; } .red_tab { font-weight: bold; color: #FFF; background-color: #E91521; } .wrap_left { padding: 0px 10px 10px 0px; float: left; margin-left: 0px; } .wrap_right { padding: 0px 0px 10px 10px; float: right; margin-right: 0px; } .space_left { padding: 0px 10px 10px 0px; } /* lmc - root level; text properties for states: normal */ .TM0i0 { font-family: Arial, Helvetica, sans-serif;; color: #000; font-size: small; font-weight: bold; font-style: normal; text-decoration: none; } /* lmc - root level; box properties for states: normal */ .TM0o0 { background: #EAEAEA; padding: 5px 5px 5px 15px; text-align: left; vertical-align: middle; text-decoration: none; } /* lmc - root level; table properties for states: normal, hover, click */ .TM0t0 { background: #EAEAEA; } /* lmc - root level; text properties for states: hover, click */ .TM0i1 { font-family: Arial, Helvetica, sans-serif;; color: #FFF; font-size: small; font-weight: bold; font-style: normal; text-decoration: none; } /* lmc - root level; box properties for states: hover, click */ .TM0o1 { background: #000; padding: 5px 5px 5px 15px; text-align: left; vertical-align: middle; text-decoration: none; } /* lmc - sub levels; box properties for states: normal */ .TM1o0 { background: #D6D6D6; padding: 5px; text-align: left; vertical-align: middle; text-decoration: none; } /* lmc - sub levels; box properties for states: hover, click */ .TM1o1 { background: #000; padding: 5px; text-align: left; vertical-align: middle; text-decoration: none; } /* lmc - subsub levels; box properties for states: normal */ .TM2o0 { background: #C2C2C2; padding: 5px; text-align: left; vertical-align: middle; text-decoration: none; } /* lmc - subsub levels; box properties for states: hover, click */ .TM2o1 { background: #000; padding: 5px; text-align: left; vertical-align: middle; text-decoration: none; }

Thanks, Ben.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hi Ben, it sounds as though

Hi Ben, it sounds as though you're coding for IE then checking in FF, which is guaranteed to end in tears, you must code for the compliant browser first then fix for that heap of S... What is worse is that you are coding to IE in 'Quirks Mode' which is just hopeless and not what you want to be doing at all. Remove the xml prolog line at the very top of the page.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Looking at the layout I'm

Looking at the layout I'm afraid that you really have to start over as you have been trying to code two different layouts using hacks , it's just not necessary, you need to loose all the child selector rulesets using position offsets and sort out a basic stable three column framework that suits both IE and FF also with FF you must ensure that you have enclosed/cleared your floated elements (extend that blue background to wrap it's contents) searching on 'clearing float containers' will produce info on how.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

byates
Offline
newbie
Lancaster
Last seen: 12 years 33 weeks ago
Lancaster
Joined: 2007-02-05
Posts: 10
Points: 0

Thanks for the advice Hugo,

Thanks for the advice Hugo, very useful. I have started from scratch with the layout and most of the problems are now fixed.

The two key issues remaining are that the backgrounds still don't appear in FireFox on the five home page divs, and the menu is misbehaving on all pages in FireFox. It is a Javascript menu which is supposed to be compliant in FireFox.

Could you take another look for me please?

Cheers, Ben.

byates
Offline
newbie
Lancaster
Last seen: 12 years 33 weeks ago
Lancaster
Joined: 2007-02-05
Posts: 10
Points: 0

Update: I have fixed the

Update:

I have fixed the menu problem now. I removed the relative positioning value from the menu div which cured it.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sorry Ben missed your

Sorry Ben missed your replies, is everything sorted now?

Have to admit I find that scrolling black background a bit disconcerting not sure the point of it.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

byates
Offline
newbie
Lancaster
Last seen: 12 years 33 weeks ago
Lancaster
Joined: 2007-02-05
Posts: 10
Points: 0

Hi Hugo, I still can't get

Hi Hugo,

I still can't get the div backgrounds displaying in FF. The background is not meant to scroll, at higher res. you dont see it at all.

They look fine in IE, so I must be missing something very simple.

Thanks, Ben.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Ben do this and copy the

Ben do this and copy the last ruleset for the other panels,you will also need to give container a little room to breath , make it a little wider

#welcome {
   overflow:hidden;
   background: url(/images/backgrounds/welcome.gif) no-repeat right top;
   width: 100%;
   }

#y1619 {
	
   background-image: url(/images/backgrounds/1619.gif) no-repeat;
   float: left;
   width: 200px;
   }

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

byates
Offline
newbie
Lancaster
Last seen: 12 years 33 weeks ago
Lancaster
Joined: 2007-02-05
Posts: 10
Points: 0

That's worked fine for the

That's worked fine for the top div, but the four below are still not showing their backgrounds, and the backgrounds have also disappeared in IE now.

I tried using a width of upto 210px for the four lower divs but this didn't change anything.

Ben.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

erm my bad background-image:

erm my bad:
'background-image:' should be 'background:'

I'm trying to get you using shorthand properties rather than seperate properties as they are generally more reliable.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

byates
Offline
newbie
Lancaster
Last seen: 12 years 33 weeks ago
Lancaster
Joined: 2007-02-05
Posts: 10
Points: 0

Thanks for that Hugo. I will

Thanks for that Hugo. I will work on my shorthand skills.

One final thing I have struggled with is clearing images via css. I have used the following code which I got from the tools on this forum but I haven't got it working.

.wrap_left:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .wrap_left{display: inline-block;}

/* Hides from IE Mac \*/
* html .wrap_left {height: 1%;}
.wrap_left{display:block;}
/* End Hack */

Example URL here:

http://www.lmc.ac.uk:82/1619/prospectus.php

Thanks for your time. Ben.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You'll need to explain what

You'll need to explain what your trying to clear, The image is floated, normally one wants to clear something below that or to clear the parent holding the float so that the parent actually encloses the floated element completely.

If you want the form below (which would seem the problem) then [=green]form{clear:both}[/green]

As for the clearing class I don't think you're using quite rightly, better to nme it .clearfix and then add it to any element that is holding floats and that need to have it's bottom edge extend to contain those floats rather than allowing them to drop through and out of the element.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me