PDA

View Full Version : CSS views giving a problem for IE6


kona72
02-23-2007, 04:26 PM
Hey Gang,

I have completed my site in CSS and it works great in FF, IE7, Safari but there is an issue with IE6. Please see attached screen shot. Basically the 'shadowbox' div i created is out of place. I am not fluent enough in CSS to know where even to start looking. Can someone give some pointers?

Here is the css...


*{
margin:0;
padding:0;
}
body{
background:#B68F4A url("../images/body/bckgrd.jpg") repeat-x;
font:11px Arial, Helvetica, sans-serif;
color:#666666;
text-align: center;
min-width:774px;
}
form {
height: 400px;
width: 350px;
padding: 20px;
}
a:link {
color: #006699;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #006699;
}
a:hover {
text-decoration: none;
color: #0033FF;
}
a:active {
text-decoration: none;
color: #006699;
}
#wrapper{
text-align: left;
width:774px;
margin: auto;
}
#headercontact{
background:url("../images/header/header.jpg");
height:201px;
}

#headerindex{
background:url("../images/header/index.jpg");
height:201px;
}

#headerdynamic{
background:url("../images/header/dynamic.jpg");
height:201px;
}

#headercms{
background:url("../images/header/cms.jpg");
height:201px;
}

#headeradmin{
background:url("../images/header/admin.jpg");
height:201px;
border-bottom: 10px solid #333333;
}

#headertrad{
background:url("../images/header/trad.jpg");
height:201px;
}

#headerabout{
background:url("../images/header/who.jpg");
height:201px;
}

#headerservices{
background:url("../images/header/what.jpg");
height:201px;
}

#headerportfolio{
background:url("../images/header/portfolio.jpg");
height:201px;
}

#content{
background:url("../images/body/body_slice.jpg");
color:#666666;
margin-top:0px;
margin-left:0px;
margin-right:0px;
}
#content p{
padding:5px 15px;
margin-left:25px;
margin-right:180px;
}
.subheading{
font:bolder 14px Arial, Helvetica, sans-serif;
color: #B68F4A;
}
#shadowbox {
float:right;
padding: 5px;
height: auto;
width: 130px;
margin-top:5px;
margin-left:10px;
margin-right:30px;
background: #B68F4A;
border-top: thin solid #666666;
border-bottom: thin solid #666666;
color: #333333;
}
#footer{
height:87px;
background:url("../images/footer/footer.jpg");
padding:0px;
}
.footer_text{
font:9px Arial, Helvetica, sans-serif;
color: #333333;
text-align: center;
}
#repeat{
margin:10px 10px;
}
.clear{
clear:both;
height:0;
font:0px;
line-height:0;
}
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 8px;
}
img.floatNone {
float: none;
margin: 4px;
}

#site {
margin: 20px 20px 20px 45px;
padding: 5px;
height: auto;
width: 500px;
}
.subheadingsmall {

font:bold 12px Arial, Helvetica, sans-serif;
color: #333333;
}
.small_text {
font:9px Arial, Helvetica, sans-serif;
color: #999999;
text-align: left;
}



And here is one of the pages



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>---| Trafick Interactive Media Solutions |---</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<meta name="Description"content=" " />
<meta name="Keywords" content=" " />
<META NAME="robots" CONTENT="FOLLOW,INDEX">
<meta name="revisit-after" content="20 days" />
<link rel="SHORTCUT ICON" href="trafick.ico" />

</head>

<body>
<div id="wrapper">
<div id="headerservices"></div>
<!--- include the navigation bar from inc/nav_inc.php -->
<?php include("inc/nav_inc.php"); ?>
<div id="content">
<div id="shadowbox"></div>
<div id="content p">
<p class="subheading">&nbsp;</p>
<p><span class="subheading"><img src="images/octs2.jpg" width="91" height="102" /></span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
<div id="footer">&nbsp;</div>
<?php include("inc/copyright.php");?>
</div>
</body>
</html>

domedia
02-23-2007, 08:16 PM
Hi Kona,
This is one of the nasty and irritating CSS bugs in IE6.

IE6 doubles the right margin you have set for #shadowbox. It's consistent under these conditions:
http://www.positioniseverything.net/explorer/doubled-margin.html
This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box.

To fix this simply set the display property to inline for your #shadowbox, so the whole CSS rule reads like this:
#shadowbox {
float:right;
padding: 5px;
height: auto;
width: 130px;
margin-top:5px;
margin-left:10px;
margin-right:30px;
background: #B68F4A;
border-top: thin solid #666666;
border-bottom: thin solid #666666;
color: #333333;
display: inline;
}

:mrgreen:

kona72
02-23-2007, 08:29 PM
Brilliant!!
Thanks Do!

chriskq
02-26-2007, 01:30 AM
this is very Bad practice.

form {
height: 400px;
width: 350px;
padding: 20px;
}


you have to HACK the padding width and height whenever u use padding and set a width and height. The class should such as:

form {
height: 400px;
width: 350px;
padding: 20px;
widt\h: 310px;
heigh\t: 360px;
}


understood what i've done?
you have 40pixels of padding on the left and right. so that means width - 40px = 310. etc etc

kona72
02-26-2007, 01:40 AM
I see what you have done but don't understand why it is 'bad practice'

Please elaborate...



widt\h: 310px;
heigh\t: 360px;



Thanks....

domedia
02-26-2007, 12:40 PM
The CSS Box Model (http://www.dreamweaverclub.com/css-box-model.php) is being interpreted differently by IE, so you'll have to use a hack like Chris did.

chriskq
02-28-2007, 05:54 AM
sorry. i shall explain.

whenever u use padding on a element that has a set width and height. you will have to hack the width and height.

eg: say ur div is 100px high, but u want 10pixels of top and bottom padding.
Now the actual div height area becomes the set height minus the top and bottom padding.

100px minus 20px (10px top, 10px bottom) = 60pixels high.
The hacked height specifies the actual previewable area in the div.

same applies for widths.

kona72
02-28-2007, 12:26 PM
ok great. I get that

My question is in your code, these two line in particular...

widt\h: 310px;
heigh\t: 360px;

Is the backslash supposed to be there at the end of width and height?

Thanks,

domedia
02-28-2007, 12:54 PM
Yeah, that's the 'hack' 8)