CSS problemo

#1
Guest_Jaan_*

Posted 21 March 2009 - 06:24 PM

Guests

Aight.. Here's my problem..

I have this code:

echo "
<table bgcolor='#e1e1e1'><tr><td>
<center><img src='images/menu.jpg'></center>
<ul id='menu'> 
<li><a href='index.php?act=index'>  Home</a></li>
<li><a href='index.php?act=members'>  Manage Members</a></li>
<li><a href='index.php?act=packages'>  Package</a></li>
<li><a href='index.php?act=postoffice'>  Post Office</a></li>
<li><a href='index.php?act=messenger'>  Messenger</a></li>
<li><a href='index.php?act=settings'>  Settings</a></li>
</ul>
 
</td></tr></table>
";

some CSS

[highlight="css"]
#menu {

float: left;
margin: 0;
padding: 0;
width: 160px;
list-style-type: none;

}

#menu a:link, #menu a:visited {

display: block;
margin: 0px 3px;
padding: 5px 0;
text-decoration: none;
font-size: 10px;
color: #000;
background-color: #e1e1e1;

}

#menu a:hover {

display: block;
margin: 0px 3px;
padding: 5px 0;
background-color:#cdcdcd;
text-decoration: none;
font-size: 10px;
color: #000;

}
[/highlight]

And my menu looks like this IN IE:

Posted Image

but it should look like this:

Posted Image

So.. what's up?

#2
njr1489

Posted 22 March 2009 - 08:50 AM

Learning Programmer

Members
70 posts

I'm not completely sure about this, but IE normally tends to give out more whitespace on pages than FF does.

#3
SnoringFrog

Posted 22 March 2009 - 12:01 PM

Newbie

Members
5 posts

I changed this block of code and it seemed to fix the problem:

 #menu a, #menu a:link, #menu a:visited {

  margin: 0px 3px;

  padding: 5px 0;

  text-decoration: none;

  font-size: 10px;

  color: #000;

  background-color: #e1e1e1;

  }


 #menu a:hover { 

  margin: 0px 3px;

  padding: 5px 0;

  background-color:#cdcdcd;

 text-decoration: none;

  font-size: 10px;

  color: #000;

 

      }

As you can see, I removed "display: block;" from both of these CSS entries and added "menu a," to the first one (Firefox wasn't picking up the CSS for the links until I did that).

I'm not entirely sure why IE adds that space around block displayed items, but apparently that's what was happening.

#4
Guest_Jaan_*

Posted 22 March 2009 - 01:12 PM

Guests

Hey.. thank you mate..

it works.. almost..
it looks like this:

Posted Image

#5
Orjan

Posted 22 March 2009 - 07:08 PM

Writes binary right handed and hex left handed

Moderators
3,299 posts

Sounds like wrong padding? maybe 2px 2px 2px 2px ?

__________________________________________
I study Information Systems at Karlstad University when I'm not on CodeCall

#6
Xav

Posted 23 March 2009 - 12:36 PM

Writes binary right handed and hex left handed

Members
13,118 posts

Try this Jaan, right at the top of the CSS file:

*
{
  margin: 0;
  border: 0;
  border: 0;
}

This will completely reset the paddings and margins, making IE and FF render it the same.

Jordan said:

Good members, like yourself, stick around and post for ages to come!
Mr. Xav | Blog | Forums

#7
Guest_Jaan_*

Posted 24 March 2009 - 04:50 AM

Guests

Naaah..

#1 Guest_Jaan_* Posted 21 March 2009 - 06:24 PM

#2 njr1489 Posted 22 March 2009 - 08:50 AM

#3 SnoringFrog Posted 22 March 2009 - 12:01 PM

#4 Guest_Jaan_* Posted 22 March 2009 - 01:12 PM

#5 Orjan Posted 22 March 2009 - 07:08 PM

#6 Xav Posted 23 March 2009 - 12:36 PM

#7 Guest_Jaan_* Posted 24 March 2009 - 04:50 AM

Sign In