Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS not ok in IE, Mozilla/netscape ok.

Status
Not open for further replies.
Chacalinc

Chacalinc

Vendor
Sep 2, 2003
2,043
0
0
US
Hi,

I have the following testing page:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<title>Ejemplo</title>
<style>

body {	margin: 0px;
		padding: 0px;
		font-size: 0.75em; 
		font-family: arial,sans-serif,verdana; 
		color: #000;
		text-align: justify;
		}

img { vertical-align: middle}

#menu { line-height: 24px; 
		height: 23px;
		padding: 0px;
		padding-top: 6px;
		width: 100%; 
		margin: 0px;
		background-color: #EEF4FF; 
	 	border-bottom: 1px solid #000;
	}

#opcion { border: 1px solid #000;
		  padding: 2px 5px 4px 5px;
		  background-color: transparent; 
}

#menu li { 
	padding-bottom: 0px;
	margin: 0; 
	border: 1px solid #000;
	padding: 2px 5px 4px 5px;
	display: inline;
	list-style-type: none;
	}

</style>
</head>
<body>

	<div id="menu"><nobr>
		<span id="opcion"><img src="home_small.png" width=12> Inicio</span>
		<span id="opcion"><img src="person.gif" width=12> Contactos</span>
		<span id="opcion"><img src="pubfile.gif" width=12> Gabinete</span>
		<span id="opcion"><img src="todo.gif" width=12> Tareas</span>
		<span id="opcion"><img src="project_s.gif" width=12> Proyectos</span>
	</div>

	<ul id="menu">
		<li><img src="home_small.png" width=12> Inicio</li>
		<li><img src="person.gif" width=12> Contactos</li>
		<li><img src="pubfile.gif" width=12> Gabinete</li>
		<li><img src="todo.gif" width=12> Tareas</li>
		<li><img src="project_s.gif" width=12> Proyectos</li>
	</ul>

	<ul id="menu">
		<li><img src="home_small.png" width=12> Inicio</li>
		<li><img src="person.gif" width=12> Contactos</li>
		<li><img src="pubfile.gif" width=12> Gabinete</li>
		<li><img src="todo.gif" width=12> Tareas</li>
		<li><img src="project_s.gif" width=12> Proyectos</li>
	</ul>

</body>
</html>

In mozilla/netscape it display good (no problem..) but IE6 center the options and they are not showed as I need (bottom border of options must be in the same line as bottom of line). IE5 (not 5.5, not tested yet) not even show the borders of options.

What am I doing wrong?

Thanks in advance.
 
Sort by date Sort by votes
In IE 6 the bottom 2 lines are the same length. Only the top line is shorter. But it looks to me like you are using this as a comparison anyway.

It could be that you are falling victim to the way in which IE handles the box model.
 
Upvote 0 Downvote
The problem may be that you are using "opcion" and "menu" as IDs and not a classes. IE only recognized and id once (either the first or last one, I forget which). Try replacing id="opcion" and id="menu" with class="opction" and class="menu".

Lastly, I'm not sure if "#menu li" is recognized. Try "menu.li"

These should help. Good luck.
 
Upvote 0 Downvote
feamcow: yes, that's for comparision only. In fact, in mozilla 3 lines are the same lenght!! IE doesn't display them good.

TheKeeya: I will try, but I would not want to use divs only... I will try anyway..

If anyone have more opinion, I'm glad to see them!

Cheers.
 
Upvote 0 Downvote

>> If anyone have more opinion, I'm glad to see them!

Glad to oblige ;o)...

Standardise your code!

I can see no reason why you're using DIV and SPAN tags for the first menu, and UL and LI tags for the second two.

Why not just use DIV and SPAN tags for all of them?

Dan
 
Upvote 0 Downvote
I think he was using it as a comparison, different methods of doing the same thing.

To conform to web standards the 2nd method is "correct" as this is purely structural markup.
Using DIVs and SPANs duplicates functionality already available with an unordered list.

It's not wrong per se, just not what Standards evangelists would do.

There should also be quotes around any attributes.
 
Upvote 0 Downvote

But having an LI and then setting the list type to none is almost the same (if not the same) as using a SPAN tag, surely?

Dan

 
Upvote 0 Downvote
Consider this:

A navigation menu is, in effect, a list.
Why not mark it up as one?
That way any browser/agent that can show a list can show the menu as such.

In my opinion, "web standards" is about getting a page back to basics.
While it isn't wrong to use the SPAN tag it is, in this case, wholly unnecessary.

Even if we didn't use a list, why not simply set a style for the img tag within the div?

Like I said though, it isn't wrong. Just different. :)
 
Upvote 0 Downvote
BillyRayPreachersSon: as Foamcow states this page is only for comparision, if you copy/paste to a file and you see it you will see 3 lines with same options. I want to get the best way to do a menu... (it must be showed ok in mozilla and IE)

<aside>
I think a standard is made for yourself, you work with the way more confortable to you.
</aside>

Foamcow: you say that use SPAN is not necessary, but between LI and SPAN -especificaly in IE- it looks better SPAN! with mozilla/netscape both looks good and as I want.

All: but my problem continues, IE don't display the desired result... If you think there is another way and my code is crap, just tell me! I know I'm not a good html'er ;)

Thanks!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
221
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
339
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
171
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
136
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
328
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top