Web Design Forums

watt · 06-06-2009, 05:06

Hello.

I was trying to slice and code the smashing point theme, to see if I can do it and I got a problem.

This is how the site looks in IE6 (I can't post links): img37.imageshack.us/img37/7838/ss2q.jpg
And this is how it looks in other browsers: img37.imageshack.us/img37/1820/ss1jqn.jpg

Those white/orange borders are images placed in other divs (They are not in the same divs as the menu/content and both of them are in the "bottom" class). It seems like IE6 fixes a margin and separates them from the rest of the forms. What can I do?

Here is my CSS:

Code:

* { margin:0; padding:0;}

body {
	background-color:#2c2825;
	margin:0 auto;
	width:763px;
}

#header{
	height:132px;
	background-image:url(images/header.png);
	background-repeat:no-repeat;
}

#menu{
	background-color:#fff;
	background-image:url(images/menutop.gif);
	background-repeat: no-repeat;
	padding:15px 30px;

}

#content{
	margin-top:30px;
	background-color:#fff;
	background-image:url(images/menutop.gif);
	background-repeat:no-repeat;
	padding:10px;
	padding-bottom:25px;
}

#lcontent{
	float:left;
	width:200px;
	border-right:1px solid #000;
}

#rcontent{
	padding-left:210px;
	padding-right:10px;
}

.bottom{
	background-image:url(images/menubottom.gif);
	background-position:bottom;
	background-repeat:no-repeat;
	height:7px;
}

Thank you!

watt · 07-06-2009, 12:31

Is there anyone who knows the answer?

d*d · 07-06-2009, 12:36

I'm not looking at the code, but there is a double margin bug in IE 6 that can be fixed by applying display:inline to the object that has the margin

lwcooper · 11-06-2009, 11:17

Could you post the HTML? Have you tried removing #content: margin-top: 30px or #menu: padding? Its hard to tell what's what just from a picture though?

watt · 12-06-2009, 05:34

Quote:

Originally Posted by lwcooper

Could you post the HTML? Have you tried removing #content: margin-top: 30px or #menu: padding? Its hard to tell what's what just from a picture though?

Sure, here it is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(i'm not allowed to post urls)">

<html xmlns="(i'm not allowed to post urls)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Smashing Point - test</title>
</head>

<body>
<div id="header"></div>

<div id="menu">
    homepage | portfolio | company | clients | testimonials | contact
</div>
<div class="bottom"></div>

<div id="content">
    <div id="lcontent">bla <br/> bla</div>
    <div id="rcontent">si alte blaaaaaaaaa si alte blaaaaaaaaa si alte blaaaaaaaaa si alte blaaaaaaaaa si alte blaaaaaaaaa si alte blaaaaaaaaa si alte blaaaaaaaaa</div>
</div>
<div class="bottom"></div>

</body>
</html>

I'm going to try what you two said. Thanks

/later edit: your options didn't seem to work

Paul.Cox · 23-06-2009, 04:19

Is there any way you can upload the images somwhere else? I can't see imageshack at the moment

watt · 23-06-2009, 04:32

I attached them here. I guess you know which is the IE6 printscreen (the one from the left).

SuperPhil · 27-06-2009, 19:42

I don't know what you're trying to do. I'm assuming you want the white and orange border to be right up against the content?

If so, why do you have bottom-padding?

Try clear:both; on the middle div tags once you remove the bottom-padding.

23-06-2009, 04:32	#7 (permalink)
watt Registered User Join Date: Jun 2009 Posts: 4	I attached them here. I guess you know which is the IE6 printscreen (the one from the left). Attached Thumbnails

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

07-06-2009, 12:31	#2 (permalink)
watt Registered User Join Date: Jun 2009 Posts: 4	Is there anyone who knows the answer?

07-06-2009, 12:36	#3 (permalink)
d*d Moderator Join Date: Oct 2004 Location: Bristol Posts: 5,046	I'm not looking at the code, but there is a double margin bug in IE 6 that can be fixed by applying display:inline to the object that has the margin

11-06-2009, 11:17	#4 (permalink)
lwcooper Registered User Join Date: Jun 2009 Location: London Posts: 12	Could you post the HTML? Have you tried removing #content: margin-top: 30px or #menu: padding? Its hard to tell what's what just from a picture though?

23-06-2009, 04:19	#6 (permalink)
Paul.Cox Registered User Join Date: Jun 2009 Location: England, UK Posts: 4	Is there any way you can upload the images somwhere else? I can't see imageshack at the moment

27-06-2009, 19:42	#8 (permalink)
SuperPhil Registered User Join Date: May 2009 Posts: 27	I don't know what you're trying to do. I'm assuming you want the white and orange border to be right up against the content? If so, why do you have bottom-padding? Try clear:both; on the middle div tags once you remove the bottom-padding.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)