Web Design Forums

Michal · 20-12-2004, 10:14

Hey there, this is my first post here and a bit of a CSS layout problem.

Okay, I've got this <div> that I want at a height of 8 pixels with a background image. It all works just fine in Firefox, but in IE there seems to be an imaginary 11 pixel margin added to the bottom of it.

Just how it should be in Firefox:

In IE with imaginary bottom margin:

Code:

#base1{
	background-image: url(Images/diagonal_pink.gif);
	background-repeat: repeat-x;
	height: 8px;
}

I have tried to fix the problem by giving the selector margin-bottom: -11px;, that fixes it in IE, but then it screws up in the Firefox display.

Anyone got any ideas on this?

Narate · 20-12-2004, 10:32

At a guess, would it be the old box model thing? since I've seen it posted here X number of times.

Honestly though. I dont have a clue as Im not a web designer...

http://tantek.com/CSS/Examples/boxmodelhack.html

Brown · 20-12-2004, 10:37

no, its the ie 3px gap bug thing. maybe something here for you:

http://www.positioniseverything.net/...reepxtest.html

Brown · 20-12-2004, 10:39

a note of interest - that link above manages to get rid of the default scrollbars in firefox - interesting...

Michal · 20-12-2004, 10:55

Forgive me if I'm wrong, but are you sure that's the problem mate? My div has nothing to do with <p> or float (I took them out to see if it had any effect)... and the gap is more than 3px too.

Brown · 20-12-2004, 10:59

sorry, didn't look at it properly, saw the 8 and 11, did a quick bit of math on the abacus, jumped to a conclusion, got it wrong.

carry on, as you were.

Michal · 20-12-2004, 11:09

Quote:

Originally Posted by Narate

At a guess, would it be the old box model thing? since I've seen it posted here X number of times.

Honestly though. I dont have a clue as Im not a web designer...

http://tantek.com/CSS/Examples/boxmodelhack.html

That looks like something else.

Thanks anyway to both of you.

Brown · 20-12-2004, 11:10

can i see the whole page? be easier to see what's going on.

Michal · 20-12-2004, 11:13

Is just the code enough? I don't have anywhere to upload the full thing.

Michal · 20-12-2004, 11:29

Maybe this can tell you something:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	background-repeat: repeat-y;
	background-position: right top;
	background-image: url(Images/wood.jpg);
	margin: 0;
}

#container {
	width: 767px;
	background: #FFFFFF;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFCAF7;
}

#topbanner {
	margin-right: -1px;
}

#logofloat {
	float: left;
	margin-left: 510px;
	margin-top: 157px;
	position: absolute;
	z-index: 1;
}



/* CONTENT PANEL TEXT //////////////////////////////////////////*/

h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #FF0000;
	display: inline;
	padding-left: 1px;
	padding-bottom: 1px;
}

.nonbold {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #FFFFFF;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #727272;
}

.indenttext {
	margin-left: 121px;
}

/* /////////////////////////////////////////////////////*/
 


/* "LATEST NEWS" PANEL //////////////////////////////////////////*/

#newsflash{
	background-color: #F396B3;
	height: 123px;
	background-image: url(Images/pinkshadow.gif);
	background-repeat: repeat-x;
	padding: 0;
}


#latest {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #FFFFFF;
	font-weight: bold;
	float: left;
	padding-left: 190px;
	margin-top: 50px;
	line-height: 1.5em;
}

#newsflashgraphic {
	float: left;
	margin-left: 30px;
	margin-top: 195px;
	position: absolute;

	z-index: 2;
}

#side1{
	background-image: url(Images/diagonal_pink_clear.gif);
	background-repeat: repeat;
	height: 100%;
	width: 29px;
	float: right;
}

#base1{
	background-image: url(Images/diagonal_pink.gif);
	background-repeat: repeat-x;
	height: 8px;
}

/*////////////////////////////////////////////////////////*/



/* NAVIGATION PANEL //////////////////////////////////////////*/

#navigation {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	padding-left: 30px;
	padding-top: 1px;
	padding-bottom: 5px;
	border-top-width: 5px;
	border-top-style: solid;
	border-top-color: #DDDDDD;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #F296BA;
	margin-right: 0px;
	background-color: #FFFFFF;
	}
	
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 4px;
	}

#navigation li {
	display: inline;
	}

#navigation a:link, #navigation a:visited {
	padding: 2px 15px 2px 15px;
	color: #FF0000;
	text-decoration: none;
	}
	
#navigation a:hover {
	color: #CCCCCC;
	}
	
#greynolink {
	padding: 2px 15px 2px 15px;
	color: #727272;
	}

/*////////////////////////////////////////////////////////*/



/* FINISHES //////////////////////////////////////////*/
#whitedivider{
	height: 16px;
	background-image: url(Images/whiteshadow.gif);
	background-repeat: repeat-x;
	background-position: top;
	margin-right: 0px;
	background-color: #FFFFFF;
}

#pattern{
	background-image: url(Images/wallpaper.gif);
	background-repeat: repeat;
	height: 124px;
}

#patternshadow{
	width: 100%;
	height: 12px;
}

/*////////////////////////////////////////////////////////*/


/* CONTENT //////////////////////////////////////////*/
#content{
	background-image: url(Images/gradient.gif);
	background-repeat: repeat-x;
	height: 700px;
}


#side2{
	background-image: url(Images/diagonal_yellow_clear.gif);
	background-repeat: repeat;
	height: 100px;
	width: 29px;
	float: right;
}

#base2{
	background-image: url(Images/diagonal_yellow_clear.gif);
	background-repeat: repeat-x;
	height: 8px;
	clear: right;
}

/*////////////////////////////////////////////////////////*/





-->
</style>
</head>

<body>

<!-- float logo -->
<img src="Images/logo_bottom.png" alt="logofloat" width="177" height="38" id="logofloat"/>

<!-- float newsflashgraphic -->
<img src="Images/newsflashes.png" alt="newsflashes" id="newsflashgraphic"/>

<!-- div for page container -->
<div id="container">

<!-- div for page banner -->
<div id="topbanner"><img src="Images/top_banner.jpg"></div>
<!-- END div for page banner -->

<!-- div for navigation panel -->
<div id="navigation">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PARTY</a></li>
<li><a href="#">PICTURES</a></li>
<li><a href="#">NEWS ARCHIVE</a></li>
<li><a href="#">CREW</a></li>
<li><a href="#">CONTACT</a></li>
<li id="greynolink">6th only</li>
</ul>
</div>
<!-- END div for navigation panel -->


<!-- div for newsflash panel -->
<div id="newsflash">

    <div id="latest">
	26.11.2004&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Almost ready to begin<br>
	18.11.2004&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;New DJ for Chrysostomos<br>
	12.11.2004&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Chrysostomos website online
	</div>
	
	<!-- div for base1 -->
	<div id="side1">
	</div>
	<!-- END div for base1 -->


</div>
<!-- END div for newsflash panel -->

<!-- div for base1 -->
<div id="base1">
</div>
<!-- END div for base1 -->

<!-- div for whitedivider -->
<div id="whitedivider">
</div>
<!-- END div for whitedivider -->
 
<div id="content">
</div>

<!-- div for pattern --> 
<div id="pattern">
<img src="Images/pattern_shadow.png" id="patternshadow"/>
</div>
<!-- END div for pattern --> 


</div>
<!-- END div for page container -->


</body>
</html>

It's this one:

Code:

<div id="base1">
</div>

Michal · 20-12-2004, 11:40

I believe the problem is something internal within the <div>... it has nothing to do with interaction with other page elements.

Michal · 20-12-2004, 11:57

CRACKED IT!!!

I've got it working... not sure if it's "proper" but it works!

I changed the font-size 6px and it now works.

It seems like the default text size was pushing the height of the <div> an extra few pixels (even though there was no text). At first I changed it to 8px but there was still an extra 2 pixels, so then I put it to 6px and it works just fine.

Any thoughts on that?

Narate · 20-12-2004, 17:10

Thought design folk were using <em> tags for font sizes nowadays.

Brown · 20-12-2004, 17:18

you're getting a little mixed up there i think.

html
<em>emphasis</em>

css
font-size: 1.2em;

Michal · 21-12-2004, 00:40

Actually, should I size fonts using em?

My reason for using px for font-size is that the appearance of the design is not compromised. It always looks how I want it to.

Em on the otherhand changes the size of the font according to the user's browser preference. As a designer it annoys me that I have no control over that element of page display... but it's important for all this standards stuff is it not?

I mean, when I tested my page using 1em it looked horrible.

Narate · 21-12-2004, 04:08

http://www.thenoodleincident.com/tut...phy/index.html

The 76%

http://www.thenoodleincident.com/tut...t/browser.html

Michal · 21-12-2004, 09:51

Aha, so you can actually make the ems-sized type look nice. Thanks for that link.

Er, does this mean that it allows for resizing while not being subject to somebody's default font-size?

---------------------------------------------------------------------------------------------------------------

BTW, I've just encountered a cross-browser difference regarding padding.

Say, for instance, I add 50px of padding to the left side of a <div>.

In Firefox the padding extends the size of the the <div> by 50px, sort of working "outwards"... while in Explorer, the padding cuts into the <div> working "inwards".

Is that normal between the two browsers, or just something brought on by bad coding?

emil · 21-12-2004, 10:44

Another solution for that problem is
overflow:hidden;
This should also work when you resize the text in your browser

It seems that somehow IE has a minimum height-thing so it doesn't allow divs to have a lower height

Michal · 21-12-2004, 13:07

Yeah, that works nicely.

Do you think this method would be more reliable than setting the default font-size to 0px (as I have done)?

emil · 21-12-2004, 13:35

I am using this method on my site and it works fine

I don't know which of the two is more reliable, but in my oppinion setting the default font size to 0px ( body {font-size:0px;} as I understand) might pose some accessibility issues (when you try to resize the text in your browser) and it would probabily mean some more coding for you (you would have to set a font size for each of your divs that you want to actually display some text )

keep it up

20-12-2004, 10:14	#1 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	Stupid IE... problems with background image Hey there, this is my first post here and a bit of a CSS layout problem. Okay, I've got this <div> that I want at a height of 8 pixels with a background image. It all works just fine in Firefox, but in IE there seems to be an imaginary 11 pixel margin added to the bottom of it. Just how it should be in Firefox: In IE with imaginary bottom margin: Code: #base1{ background-image: url(Images/diagonal_pink.gif); background-repeat: repeat-x; height: 8px; } I have tried to fix the problem by giving the selector margin-bottom: -11px;, that fixes it in IE, but then it screws up in the Firefox display. Anyone got any ideas on this?

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

20-12-2004, 10:32	#2 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,242	At a guess, would it be the old box model thing? since I've seen it posted here X number of times. Honestly though. I dont have a clue as Im not a web designer... http://tantek.com/CSS/Examples/boxmodelhack.html

20-12-2004, 10:37	#3 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	no, its the ie 3px gap bug thing. maybe something here for you: http://www.positioniseverything.net/...reepxtest.html

20-12-2004, 10:39	#4 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	a note of interest - that link above manages to get rid of the default scrollbars in firefox - interesting...

20-12-2004, 10:55	#5 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	Forgive me if I'm wrong, but are you sure that's the problem mate? My div has nothing to do with <p> or float (I took them out to see if it had any effect)... and the gap is more than 3px too.

20-12-2004, 10:59	#6 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	sorry, didn't look at it properly, saw the 8 and 11, did a quick bit of math on the abacus, jumped to a conclusion, got it wrong. carry on, as you were.

20-12-2004, 11:10	#8 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	can i see the whole page? be easier to see what's going on.

20-12-2004, 11:13	#9 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	Is just the code enough? I don't have anywhere to upload the full thing.

20-12-2004, 11:40	#11 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	I believe the problem is something internal within the <div>... it has nothing to do with interaction with other page elements.

20-12-2004, 11:57	#12 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	CRACKED IT!!! I've got it working... not sure if it's "proper" but it works! I changed the font-size 6px and it now works. It seems like the default text size was pushing the height of the <div> an extra few pixels (even though there was no text). At first I changed it to 8px but there was still an extra 2 pixels, so then I put it to 6px and it works just fine. Any thoughts on that?

20-12-2004, 17:10	#13 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,242	Thought design folk were using <em> tags for font sizes nowadays.

20-12-2004, 17:18	#14 (permalink)
Brown volkswagen yellow & gold Join Date: Apr 2003 Location: london, england. Posts: 6,147	you're getting a little mixed up there i think. html <em>emphasis</em> css font-size: 1.2em;

21-12-2004, 00:40	#15 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	Actually, should I size fonts using em? My reason for using px for font-size is that the appearance of the design is not compromised. It always looks how I want it to. Em on the otherhand changes the size of the font according to the user's browser preference. As a designer it annoys me that I have no control over that element of page display... but it's important for all this standards stuff is it not? I mean, when I tested my page using 1em it looked horrible.

21-12-2004, 04:08	#16 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,242	http://www.thenoodleincident.com/tut...phy/index.html The 76% http://www.thenoodleincident.com/tut...t/browser.html

21-12-2004, 09:51	#17 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	Aha, so you can actually make the ems-sized type look nice. Thanks for that link. Er, does this mean that it allows for resizing while not being subject to somebody's default font-size? --------------------------------------------------------------------------------------------------------------- BTW, I've just encountered a cross-browser difference regarding padding. Say, for instance, I add 50px of padding to the left side of a <div>. In Firefox the padding extends the size of the the <div> by 50px, sort of working "outwards"... while in Explorer, the padding cuts into the <div> working "inwards". Is that normal between the two browsers, or just something brought on by bad coding?

21-12-2004, 10:44	#18 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,999	Another solution for that problem is overflow:hidden; This should also work when you resize the text in your browser It seems that somehow IE has a minimum height-thing so it doesn't allow divs to have a lower height

21-12-2004, 13:07	#19 (permalink)
Michal Registered User Join Date: Dec 2004 Posts: 42	Yeah, that works nicely. Do you think this method would be more reliable than setting the default font-size to 0px (as I have done)?

21-12-2004, 13:35	#20 (permalink)
emil dt immigrant Join Date: Nov 2004 Location: Bucharest - Romania Posts: 6,999	I am using this method on my site and it works fine I don't know which of the two is more reliable, but in my oppinion setting the default font size to 0px ( body {font-size:0px;} as I understand) might pose some accessibility issues (when you try to resize the text in your browser) and it would probabily mean some more coding for you (you would have to set a font size for each of your divs that you want to actually display some text ) keep it up

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