Different height in IE and Opera

**McCain** · Aug 30th, 2004, 07:17 AM

Hi,
This is what my page looks like in IE and Opera: (resized to 60% limit the filesize)

I want it to look like it does in Opera in IE as well.

calendar.php (the relevant part)

Code:

<body>
<!-- here's some code for the top menu that I've cut out -->
	<div id="leftnav">
		<a href="../index.html" class="top"><img src="../akrahall.gif" alt="&Aring;krah&auml;ll" /></a>
		<ul>
			<li><a href="./calendar.php?day=1&month=1&year=<?php echo $aYear;?>"<?php echo ($aMonth == '1')?' class="active"':''; ?>>Januari</a></li>
			<li><a href="./calendar.php?day=1&month=2&year=<?php echo $aYear;?>"<?php echo ($aMonth == '2')?' class="active"':''; ?>>Februari</a></li>
			<li><a href="./calendar.php?day=1&month=3&year=<?php echo $aYear;?>"<?php echo ($aMonth == '3')?' class="active"':''; ?>>Mars</a></li>
			<li><a href="./calendar.php?day=1&month=4&year=<?php echo $aYear;?>"<?php echo ($aMonth == '4')?' class="active"':''; ?>>April</a></li>
			<li><a href="./calendar.php?day=1&month=5&year=<?php echo $aYear;?>"<?php echo ($aMonth == '5')?' class="active"':''; ?>>Maj</a></li>
			<li><a href="./calendar.php?day=1&month=6&year=<?php echo $aYear;?>"<?php echo ($aMonth == '6')?' class="active"':''; ?>>Juni</a></li>
			<li><a href="./calendar.php?day=1&month=7&year=<?php echo $aYear;?>"<?php echo ($aMonth == '7')?' class="active"':''; ?>>Juli</a></li>
			<li><a href="./calendar.php?day=1&month=8&year=<?php echo $aYear;?>"<?php echo ($aMonth == '8')?' class="active"':''; ?>>Augusti</a></li>
			<li><a href="./calendar.php?day=1&month=9&year=<?php echo $aYear;?>"<?php echo ($aMonth == '9')?' class="active"':''; ?>>September</a></li>
			<li><a href="./calendar.php?day=1&month=10&year=<?php echo $aYear;?>"<?php echo ($aMonth == '10')?' class="active"':''; ?>>Oktober</a></li>
			<li><a href="./calendar.php?day=1&month=11&year=<?php echo $aYear;?>"<?php echo ($aMonth == '11')?' class="active"':''; ?>>November</a></li>
			<li><a href="./calendar.php?day=1&month=12&year=<?php echo $aYear;?>"<?php echo ($aMonth == '12')?' class="active"':''; ?>>December</a></li>
		</ul>
	</div>
<!-- here comes the rest of the page -->
</body>

global.css (again, only the relevant parts)

Code:

body
{
	margin: 0;
	padding: 0;
	background-color: #FFF; /* same as #FFFFFF */
	font-family: Verdana;
	font-size: 0.9em;
	background: #FFF url('./Menu/bg_left.gif') repeat-y top left;
}

#leftnav
{
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	height: 100%;
	background: #DAE0D2 url("./Menu/bg_leftnav.gif") repeat-y right;
	clear: both;
}

#leftnav a.top
{
	display: block;
	background: transparent url('./Menu/bg_upperleft.gif') no-repeat scroll top right;
	border: 0;
}

#leftnav a
{
	display: block;
	color: #765;
	text-decoration: none;
}

#leftnav a:hover
{
	color: #000;
}

#leftnav img
{
	border: 0;
}

#leftnav ul
{
	position: relative;
	left: -20px;
	font-size: 1.1em;
	list-style-type: none;
	color: #765;
	line-height: 1.2em;
}

#leftnav li
{
	padding: 0 0 0 15px;
	background: transparent url('./Menu/n_br.gif') no-repeat scroll top left;
}

I think it might have to do with the display: block; on #leftnav a but I'm not sure

What can I do to make it look like it does in Opera in IE?

**Jop** · Aug 31st, 2004, 06:53 AM

Hi mccain:

Code:

#leftnav a
{
	color: #765;
	text-decoration: none;
}

That should fix it (removing the block part indeed).

**McCain** · Aug 31st, 2004, 03:07 PM

Thanks for your answer. Your solution had one small drawback - the clickable area became much smaller than it was before.
First you see how it is now (red square)
Then how it was before
And at the bottom you see the ideal situation

Can you make the clickable zone that big? Or at least as big as it was before?

**McCain** · Sep 1st, 2004, 01:02 PM

Got the images in the above posts working again...

**Jop** · Sep 2nd, 2004, 05:09 AM

This css will make the clickable text bigger, note that I've put in the display: block; again:

Code:

body
{
	margin: 0;
	padding: 0;
	background-color: #FFF; /* same as #FFFFFF */
	font-family: Verdana;
	font-size: 0.9em;
	background: #FFF url('./Menu/bg_left.gif') repeat-y top left;
}

#leftnav
{
	width: 200px;
	height: 100%;
	background: #DAE0D2 url("./Menu/bg_leftnav.gif") repeat-y right;
	clear: both;
}

#leftnav a.top
{
	display: block;
	background: transparent url('./Menu/bg_upperleft.gif') no-repeat scroll top right;
	border: 0;
}

#leftnav a
{
	margin: 0;
	padding: 0 50px 0 15px;
	display: block;
	width: 100px;
	color: #765;
	background: #000;
	text-decoration: none;
}

#leftnav a:hover
{
	color: #000;
}

#leftnav img
{
	border: 0;
}

#leftnav ul
{

	font-size: 1.1em;
	list-style-type: none;
	color: #765;
	line-height: 1.2em;
}

#leftnav li
{
	background: transparent url('./Menu/n_br.gif') no-repeat scroll top left;
}

**McCain** · Sep 8th, 2004, 04:35 AM

Thank you, that worked.
But instead of width: 100px; I put height: 1.2em; That was even better.

Thread: Different height in IE and Opera

Thread Tools

Display

Different height in IE and Opera

Posting Permissions