Sæll,
Ég myndi gera þetta aðeins öðruvísi. Númer 1 væri að endurskrifa valmyndina og setja hana upp sem lista, þ.e með UL og LI. Svo myndi ég sleppa því að vesenast með hæð, nota þess í stað padding á tenglana. Venjulega er ekki hægt að setja top/bottom padding á tengla, en þegar búið er að floata þeim, þá er það hægt.
Hérna er þetta með þeim breytingum sem ég myndi gera … virkar í “öllum” vöfrum.
HTML-ið:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang='is' lang='is' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Golin-is.com</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="inc/style.css" />
<meta name="Description" content="Collection of links. Safn Tengla," />
<meta name="Keywords" content="Links, Tenglar" />
</head>
<body bgcolor="#01557C">
<center>
<div id="menu_top">
<ul id="secondary">
<li><a href="index.php?lan=is">Íslenska |</a></li>
<li><a href="index.php?lan=en">English</a></li>
</ul>
<ul id="main">
<li><a href="">Heim |</a></li>
<li><a href="">Flokkar |</a></li>
<li><a href="">Niðurhal |</a></li>
<li><a href="">Fréttir |</a></li>
<li><a href="">Innskrá</a></li>
</ul>
</div>
<div id="main_box">
<div align="center"><img src="images/main01.gif" width="755" height="5" alt="" border="0" /></div>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</div>
</center>
</body></html>
Og styles.css (Mínar breytingar eru þær sem eru í einni línu, hef vanið mig á að skrifa CSS þannig):
#menu_top {
margin : 0;
width : 755px;
background : #fff url(../images/fon_menu.gif) repeat-x;
border-left : 2px solid #000000;
border-top : 2px solid #000000;
border-right : 2px solid #000000;
height : 40px;
padding : 0;
}
#main, #secondary { margin:0; padding:0; list-style:none; }
#main { float:left; padding-left:5px; }
#secondary { float:right; padding-right:10px; }
#main li, #secondary li { float:left; font-weight:bold; }
#main li a, #secondary li a { float:left; padding:13px 0px 13px 6px; font-size:12px; font-family:Tahoma, Verdana, Arial; font-weight:bold; color:#000; text-decoration:none; }
#main_box {
background : #fff;
width : 755px;
border-left : 2px solid #000000;
border-right : 2px solid #000000;
border-bottom : 2px solid #000000;
height : 400px;
}
#box_allt {
width : 230px;
}
#box_haus {
background : #777777;
height : 25px;
padding : 3px 1px 1px 15px;
}
#box_rammi {
background : #ffffff;
border : 1px solid #cccccc;
}
#box_litla_rond {
height : 3px;
background : #ef9400;
}
#box_main {
width : 228px;
padding : 4px 4px 4px 9px;
}
#box_botn {
height : 28px;
background : #fff url(../images/t_fon.gif) repeat-x;
}
#box_skuggi {
text-align : right;
}
.box_title {
color : #ffffff;
padding-top : 5px;
padding-bottom : 5px;
margin-bottom : 0;
margin-left : 15px;
margin-right : 11px;
font-size : 11px;
font-family : Tahoma, Verdana, Arial;
font-weight : bold;
}
.box_title a {
color : #ef6d00;
}
.box_title a:hover {
color : #c25a02;
}
.box_text {
color : #000000;
margin-top : 10px;
padding-bottom : 5px;
margin-bottom : 0;
margin-left : 20px;
margin-right : 20px;
font-size : 11px;
font-family : Tahoma, Verdana, Arial;
font-weight : bold;
}
.box_text a {
color : #ff6600;
}
.box_text a:hover {
color : #ff0000;
}
Svo er hér prýðisgrein sem ég fann á netinu um það hvernig best er að tryggja að vefir séu eins í öllum vöfrum:
http://friendlybit.com/css/cross-browser-strategies-for-css/Athugaðu sérstaklega atriði 3, “Remove default styling of elements”. Það eru ekki allir sem átta sig á þessu, þ.e að núllstilla default gildi á padding/margins o.þ.h sem eru mismunandi á milli vafra. Af minni reynslu, þá myndi ég segja að það sé það sem veldur flestum vandræðum.
Vonandi að þetta hjálpi eitthvað …