4 replies [Last post]
dmidwinter
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-01-15
Posts: 3
Points: 0

Hi,

I'm working on a small site for my father-in-law and I've run into a layout problem in ie6. It's fine in firefox and Ie7, but in ie6 I cant get the shadow on the right-hand side to line up with the top of the screen in the same way that the left-hand shadow does.

you can see a live test site here

http://homepage.ntlworld.com/duncan.midwinter/edilgradara/

and the css for the layout is here:

#maincontainer { padding: 0; margin-top: 0; margin-right: auto; margin-left: auto; width: 854px; }

#leftshadow {
width: 27px;
height: 384px;
margin: 0;
float: left;
background: url(theme/shadowleft.gif) no-repeat;
}

#pagecontainer {
width: 800px;
margin: 0;
float: left;
}

#rightshadow {
width: 27px;
height: 384px;
margin: 0;
float: left;
background-image: url(theme/shadowright.gif);
}

#header {
width: 760px;
height: 126px;
margin: 0;
float: left;
padding-right: 20px;
padding-left: 20px;
background: url(theme/header1.jpg) no-repeat;
}

#header h1 {
line-height: 4em;
color: #999;
font: 4em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.subtitle {
font: italic bold .25em Georgia, "Times New Roman", Times, serif;
}

#contentcontainer {
width: 758px;
margin: 0;
float: left;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-left: 1px solid #cccccc;
background-color: #fff;
padding: 0 20px 10px;
}

#footer {
width: 780px;
height: 50px;
margin: 0;
background: url(theme/footer.gif) repeat-x;
float: left;
text-align: right;
padding-top: 6px;
padding-right: 20px;
color: #999;
font-size: .8em;
}

#page {
width: 510px;
float: left;
margin: 0 20px 0 0;
}

#sidebar {
width: 220px;
margin: 0;
float: right;
}

#clearer {
clear: both;
}

any help would be greatly appreciated!

Cheers,
Duncan.

Logus
Logus's picture
Offline
Enthusiast
Last seen: 12 years 5 weeks ago
Joined: 2008-01-08
Posts: 53
Points: 0

H1 error

HEllo
In Firefox H1 have a 38px margin by defaultbut IE6 don`t know that, my suggestion add this lines:

#header h1 {styles.css (line 119) margin:0px; padding-top:40px; padding-left:20px;

"Todo habito hace nuestra mano mas habil y nuestro genio mas torpe"
Contact in my blog http://www.miguelmanchego.com

dmidwinter
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-01-15
Posts: 3
Points: 0

the problem is with the shadow...

Hi,

I'm aware of the H1 margin -- I just haven't altered it yet, my question is, however:

how can I get the shadow at the right hand side to line up?

Logus
Logus's picture
Offline
Enthusiast
Last seen: 12 years 5 weeks ago
Joined: 2008-01-08
Posts: 53
Points: 0

Div too small for IE6

Hello
Exist two errors, but if you want solve that easy only do this:

#maincontainer {styles.css (line 79)
margin-left:auto;
margin-right:auto;
margin-top:0pt;
padding:0pt;
width:865px;
}

Changing Div width is enough

The large explanation you have an error with firefox, #maincontainer DIV don`t increase size, you can`t see that but using firebug is possible see, exist two solutions: add to #maincontainer a line overflow:hidden or add a line after float divs


"Todo habito hace nuestra mano mas habil y nuestro genio mas torpe"
Contact in my blog http://www.miguelmanchego.com

dmidwinter
Offline
newbie
Last seen: 13 years 12 weeks ago
Joined: 2008-01-15
Posts: 3
Points: 0

Thanks!

Thanks for your help! this was driving me crazy and the solution was so simple! :blushing: