3 replies [Last post]
Drunkencelt
Offline
Regular
Derby, UK
Last seen: 12 years 10 weeks ago
Derby, UK
Joined: 2007-09-18
Posts: 20
Points: 0

Hi,

Having some problems which I can't get to the bottom of really.

Using Dreamweaver as editor but direct coding HTML and CSS. I'm in the process of changing an existing site over from tables and am getting on ok but have some issues with Netscape and FF not displaying background colours properly. IE displays it fine. Basically 'Body' colour is black (mainly to colour the header and footer sections)and there are two other main divisions in between containing everything else with background-color set to white.

Also the 'content' div is properly floated right in IE but sits below the left floated 'sidebar' div in NS and FF.

Not sure if there's an issue with the 'contentlevel' div as it doesn't seem to be nesting properly in spite of the HTML looking ok. DW will not indicate it's presence with a border like it does with the other divs although I can't see why not.

I'd appreciate some help or suggestions please.

Many thanks.

HTML:

Prototype CSS Sheet





Northumbria C.H.A.O.S Club








Heading 3


Content. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page.This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page. Content. This is the best way to check the scrolling and alignment of this division. The content should fill the box but not overflow out into the rest of the page.




And the CSS:

/* CSS Document */

body {
font: 80% Verdana, Arial, Helvetica, sans-serif;
text-align:left;
background-color:#000000;
margin:0px 0px 0px 0px;
}
h1 { /* Whips title text out of view and replaces it with a graphic */
background-image:url(../images/maintitle2.jpg);
background-repeat:no-repeat;
width:450px;
height:60px;
font-size:1px;
text-indent:-999em;
}
h2 {
font-size:1.5em;
font-style:italic;
}
h3 {
font-size:1em;
font-variant:small-caps;
}
a {
color:#FFFFFF;
text-decoration:none;
}
img {
border:0;
}
a:hover {
color: #000000;
}
ol {
list-style-type: none;
}
#header {
width:100%;
height:100px;
margin-top:18px;
}
#headerlogo {
position:absolute;
left:416px;
top:10px;
width:83px;
height:83px;
z-index:4;
}
#maintitle {
position:absolute;
left:500px;
top:23px;
width:auto;
height:auto;
z-index:2;
}
#headertagline {
position:absolute;
left:548px;
top:74px;
width:325px;
height:16px;
z-index:3;
color:#FFFFFF;
font: italic bold 1.1em Verdana, Arial, Helvetica, sans-serif;
}
#headerimage {
background-image:url(../images/title_shape.gif);
background-repeat:no-repeat;
background-position:bottom left;
position:absolute;
left:382px;
top:71px;
width:49px;
height:47px;
z-index:3;
}
#navigation {
float:left;
width:383px;
height:100px;
z-index:1;
border-top:18px;
background-color: #999999;
}
#nav1 {
float:left;
width:175px;
height:92px;
z-index:1;
padding:0;
}
#nav2 {
float:right;
width:198px;
height:92px;
z-index:2;
padding:0;
}
#montagelevel {
clear:both;
width:100%;
height:245px;
z-index:3;
background-color:#FFFFFF;
}
#imagestriptagline {
width:275px;
height:50px;
margin:5px 0 0 400px;
z-index:2;
}
#montage {
float:left;
width:575px;
height:245px;
z-index:1;
background-image:url(../images/main_montage.jpg);
background-repeat:no-repeat;
}
#contentlevel {
width:100%;
height:auto;
background-color:#FFFFFF;
}
#sidebar {
float:left;
width:200px;
height:550px;
background-image:url(../images/home_left_side.gif);
background-repeat:no-repeat;
text-align:center;
z-index:4;
}
/* Start - Swap image technique for multimap logo link */
#mmap a {
display:block;
position:relative;
top:150px;
width:150px;
height:36px;
background:url(../images/mmap.jpg) 0 0 no-repeat;
}
#mmap a:hover {
background-position:-150px 0;
}
#mmap span {
position:relative;
right:200px;/*whips link text out of view*/
}
/* End */
#content {
float:right;
margin:40px 200px 50px 0;
height:auto;
z-index:5;
}
#maptag, #montag {
font-style:italic;
font-size:0.8em;
}
#nwater {
position:relative;
top:280px;
}
#montag {
position:relative;
top:240px;
}
#montane {
position:relative;
top:240px;
}
#sponsortitle {
position:relative;
top:240px;
}
#maptag {
position:relative;
top:150px;
}
#footer {
clear:both;
width:100%;
height:100px;
z-index:6;
color:#FFFFFF;
text-align: center;
}
#footercheviot {
float:left;
margin-left:50px;
}
#footerpolice {
float:right;
margin-right:50px;
}
#footer a {
color:#FFFFFF;
text-transform:uppercase;
}
#footer a:hover {
color:#FFFFFF;
text-decoration:underline;
}
#webaddress a {
text-transform:lowercase;
}
#footer li {
display:inline;
list-style:none;
}
#designed_by {
font-size:0.9em;
}
#copyright {
font-size: 0.9em;
color: #FF9900;
}
#meter {
display:none;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 27 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

A lot of bad ideas here.

A lot of bad ideas here. All those offset relative positioned elements are out of the flow, and not seen by other elements.

#nwater {
position:relative;
top:280px;
}
#montag {
position:relative;
top:240px;
}
#montane {
position:relative;
top:240px;
}
#sponsortitle {
position:relative;
top:240px;
}
#maptag {
position:relative;
top:150px;
}
and maybe more. RP is loaded with big toothed gotchas. If you do not fully grok what they're doing, you will get bit. Simply delete those rulesets, and see if it isn't better. If you do need to shift something, try margins first (read up on margin-collapse).

It is not a good idea to set heights for elements that contain non-fixed content, eg., text. IE will expand the container if necessary, but modern browsers will do things the right way, leaving you with overflow.

#contentlevel contains its float children due to a bug in IE. Modern browsers properly allow the floats to overflow. Floats are out of the flow, so the parent, #contentlevel has no content. See containing float elements.

#contentlevel {
  background-color:#FFFFFF;
  display: inline-block;  /*sets hasLayout in IE*/
  overflow: hidden;       /*sets new block formatting context in
                            modern browsers*/
  }

#contentlevel {
  display: block;         /*restores display*/
  }

#sidebar {
  float:left;
  width:200px;
  background-image:url(../images/home_left_side.gif);
  background-repeat:no-repeat;
  text-align:center;
  }

#content {
  margin:40px 0 50px 210px;
  }

The same observation applies to #montagelevel and its child elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Drunkencelt
Offline
Regular
Derby, UK
Last seen: 12 years 10 weeks ago
Derby, UK
Joined: 2007-09-18
Posts: 20
Points: 0

Hi Gary. Thanks for the

Hi Gary.

Thanks for the pointers. I think I get what you are saying so I'll go and read up some more then re-code things some.

It's very useful being able to check with someone who knows. A point in the right direction certainy helps.

Cheers

Jock

Drunkencelt
Offline
Regular
Derby, UK
Last seen: 12 years 10 weeks ago
Derby, UK
Joined: 2007-09-18
Posts: 20
Points: 0

Everything Works Great!

Many thanks Gary.

Reset the CSS as you suggested and the page now displays identically on FF & IE7(although looking at both I prefer FF to IE). What's more I now understand what the problem was thanks to the guidance on your site and here.

It's also solved another problem I had when resizing the browser. Previously the right margin did not behave properly as the window got smaller - the text got crushed into a narrow centre column, presumably because the width of #content was set to 100% of the browser full size width which did not adjust for the smaller window. Now it displays as it should with the right margin because I've not set any widths.

Also I am now using FF as my primary test browser as you advise.

Brill.

All the best! :thumbsup: