4 replies [Last post]
left
Offline
newbie
Last seen: 14 years 10 weeks ago
Joined: 2006-05-01
Posts: 3
Points: 0

Hi! i'm more new than new.. but i have a valid XHTML and CSS .. which contains a very simple layout.. which renders as i want at Firefox Mac, but at Firefox on a pc renders defrently..it gives -60px at margin.

so thats my css:


 
body { 
font-size: 12pt; 
border: 1px #787888 solid; 
width: 722px; 
position: relative; 
left: auto; 
bottom: auto; 
right: auto; 
top: auto; 
padding-bottom: 40px; 
padding-left: 4px; 
padding-right: 4px; 
padding-top: 30px; 
background-color: #999999; 
margin-top: 10px; 
margin-bottom: 10px; 
font-weight: normal; 
font-style: normal; 
text-decoration: none; 
margin-left: auto; 
margin-right: auto; } 
 
 
ul#menuBar { 
list-style-type: none; 
margin-left: 24px; 
margin-top: 0.1em; 
margin-right: 24px; 
padding-right: 0px; 
margin-bottom: 0px; 
padding-bottom: 0px; 
padding-top: 0px; 
padding-left: 0px; 
font-size: 12pt; 
font-weight: normal; 
font-style: normal; 
text-decoration: none; 
} 
 
 
/[b]/IN THIS PART IS THE PROBLEM// 
 
ul#menuBar li { 
list-style: none; 
display: inline; 
margin: 0; 
text-align: center; 
font-weight: bold; 
padding-top: 4px; 
border-right: 1px #647172; 
border-bottom: 1px #647172; 
padding-bottom: 10px; 
padding-left: 0px; 
padding-right: 0px; }[/b] 


and thats the XHTML in which it refers:

<?xml version="1.0" encoding="UTF-8"?> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="el" lang="en">  
 
	<head> 
 
		<title>Η Γομά</title> 
 
	<link rel="stylesheet" href="../css/krifer.css" type="text/css" /> 
 
	</head> 
 
	<body> 
<!--	Menu Bar	--> 
 
<ul id="menuBar"> 
 
<li> <a href="tout1.html">Αστέρτηφα1 </a> </li> 
 
<li> <a href="tout2.html">Αστέρτηφα2 </a> </li> 
 
<li> <a href="tout3.html">Αστέρτηφα3</a >  </li> 
 
<li> <a href="tout4.html">Αστέρτηφα4 </a> </li> 
 
<li> <a href="tout5.html">Αστέρτηφα5</a> </li> 
 
<li> <a href="tout6.html"> Αστέρτηφα6 </a> </li> 
 
 
</ul> 


I just cant fingure out what i have done wrong.
and i dont wont to use tables.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: &lt;ul&gt; is aligned on all browsers at a mac.. but not

left wrote:

 
body { 
position: relative; 
left: auto; 
bottom: auto; 
right: auto; 
top: auto; 


What's this bit for?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

left
Offline
newbie
Last seen: 14 years 10 weeks ago
Joined: 2006-05-01
Posts: 3
Points: 0

Re: &lt;ul&gt; is aligned on all browsers at a mac.. but not

thats just to align at center the body's border...

and let me correct my inquire.. the problem is that my page is correct at Camino,Firefox,Netscape,Opera8 on a mac.. but on a pc the firefox aligns the menu bar not as determined..
and the IE just *beep*s all up..

now could you give me a bit of advice?

1.I'm confused with the defrence with margin/padding and position, when to use what and why? (i've red the specifications, and i don't get it)

plus how is better to stracture a layout:: ex. body{position: absolute}
and the other elements relative to the body?

2.if a layout is verified and works on all browesers but not at IE,
the problem is on the code or at the rendering engine of IE, and how should i deal with such cases?

thanks,

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

&lt;ul&gt; is aligned on all browsers at a mac.. but not at

To centre the body, use margin-left and margin-right: auto.

1. Use margins for positioning as a first preference. Position: relative/absolute will be useful in certain circumstances, but you need to understand the visual formatting model. This and the related article may help.

2. The answer to your question is it's usually IE's fault and not your code.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

left
Offline
newbie
Last seen: 14 years 10 weeks ago
Joined: 2006-05-01
Posts: 3
Points: 0

solved

thanks

i'll dig up more about positioning Wink