FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Browsers battle (FF, IE, OP) and CSS

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


imagefree
Here is the Html code of a menu (without any links functionality)

Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
li {
   font-family: "Times New Roman", Times, serif;
   font-weight: bold;
   color: #FF0000;
   background-color: #000000;
   text-indent: 25px;
   width: 160px;
   padding-top: 2px;
   padding-right: 2px;
   padding-bottom: 2px;
   padding-left: 10px;
   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #999999;
   border-right-color: #333333;
   border-bottom-color: #333333;
   border-left-color: #999999;
   list-style-type: square;
}
-->
</style>
</head>

<body>
<ul>
  <li>Home</li>
  <li>Design</li>
  <li>Prints</li>
  <li>Services</li>
  <li>Advertise</li>
  <li>Galleries</li>
  <li>Contact us </li>
  <li>FeedBack </li>
</ul>

</body>
</html>



Now Just opera displays it correctly and Firefox and IE displays it abnormally. Can you please help me how to change this code so that it appears same on all three browsers.
Azmo
ok.. first of all.. u don't have any css for....

#urid ul {

you have css for #li {

but not for #li a {

#li a-active
#li a:hoover

and so on.. can be because of that..
imagefree
bro there is no "<a>" in this script.
Azmo
ok.. I didnt read it that good Razz but I guess u are going to use <a> sooner or later..

anyways.. ur css don't have any #myid ul {

some css I use

Code:
#menu {
   width:180px;
   height:298px;
   background:url('../gfx/menu_bg.gif') no-repeat;
   padding:5px 10px 0px 10px;
   margin:0px;
   position:absolute;
   top:42px;
   left:784px; }
   
#menu ul {
   margin:0;
   padding:0;
   list-style-type:none; }
#menu li {
   float:left;
   margin:0; }



html

Code:
<div id="menu">
<ul>
<li></li>
</ul>
</div>
mathiaus
For Firefox, just add this to your li
Code:
list-style-position: inside;


Haven't worked out IE yet
JayBee
What about this?

Your code
My code

Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
ul {
        width: 175px;
}
li {
        font-family: "Times New Roman", Times, serif;
        text-indent: 12px;
        font-weight: bold;
        margin: 0px;
        padding: 2px 0px;
        list-style-position: inside;
        list-style-type: square;
        border-top: 1px solid #999999;
        border-right: 1px solid #333333;
        border-bottom: 1px solid #333333;
        border-left: 1px solid #999999;
        background: black;
        color: red;
}
-->
</style>
</head>

<body>
<ul>
  <li>Home</li>
  <li>Design</li>
  <li>Prints</li>
  <li>Services</li>
  <li>Advertise</li>
  <li>Galleries</li>
  <li>Contact us </li>
  <li>FeedBack </li>
</ul>

</body>
</html>


In fact, I just put width to ul {} not to li {} Smile

Works well in Konqueror, Firefox, Opera, Internet Explorer
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.