Forum Moderators: not2easy

Message Too Old, No Replies

css and browser question!

         

Fuzzylightbulbhead

5:17 pm on Jan 4, 2010 (gmt 0)

10+ Year Member



Hi,
I've just put my site online but there are still a few things that need to be tweaked and i wonder if anyone can help! The link is <snip> the left column appears over the logo and i need it to go behind, also there is a huge gap above the footer, I've tryed different css but it throws everything else out! Also in IE the columns aren't in the right place! Can anybody help! Thanks!

#container #leftCol {
z-index: 4;
width: 340px;
float: left;
background-image: url(Images/leftshadow2.png);
background-repeat: repeat;
border-right-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: none;
border-right-color: #000000;
clear: none;
background-position: left top;
position: absolute;
}

#container #rightCol {
z-index: 5;
width: 665px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 350px;
background-position: center top;
float: none;
clear: none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
background-repeat: no-repeat;
}
#container #logobox {
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 0px;
float: left;
height: 298px;
width: 360px;
clear: none;
overflow: visible;
visibility: visible;
position: absolute;
}

#container #footer{
clear: both;
float: left;
height: 30px;
width: 1024px;
background-repeat: repeat;
background-position: left top;
background-color: #61526D;
position: absolute;
z-index: 7;
margin: 0px;
padding: 0px;
}

[edited by: engine at 5:23 pm (utc) on Jan. 4, 2010]
[edit reason] See CSS Charter [/edit]

rocknbil

6:35 pm on Jan 4, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard Fuzzylightbulbhead, as you can see direct links are not allowed so we can't see. But I have a feeling the page has problems on a fundamental level. For example,

#container #leftCol {
z-index: 4;
width: 340px;
float: left;
/* etc */
position: absolute;
}

You have position absolute but no position indicated. Second, you generally don't mix floats and absolute positioning, and although this may be possible is mixing two approaches and may give odd results depending on browser and version.

I suggest you post an anonymized version (remove identifying links, use example.com, and all identifying text, like "company name") of both the HTML and CSS. Don't code dump, reduce it to the smallest set of both that demonstrates the problem. Validate the code [validator.w3.org] before posting it, this will help . . . then members here can give you a solid solution that will be ( or close to) cross browser compatible.

monie

11:35 am on Jan 10, 2010 (gmt 0)

10+ Year Member



Adding a z-index to logobox might help. leftCol's z-index:4; is probably putting it on top of the logo.

I and others might be able to help regarding the footer if you could post some (the relevant parts only) of your html and shorten your css down to the relevant parts.