[SOLVED] unfair IE, destroying entire elements

Ninjakreborn · March 15, 2007

I really don't understand this. I spent an hour perfecting a navigation structure in CSS to get rollover affects and IE just blows it.

I don't really understand this. The upper navigation is fine in IE, but it sucks ass in Firefox.

#toplinks {
float:right;
margin-top:80px;
margin-right:130px;
}

#toplinks li {
list-style:none;
display:inline;
}

a.link1 { /* definition of the "image" class in the <a> tag */
padding:5px 100px 0px 6px;
width:97px;
height:17px;
    background-image:url(../images/home_on.jpg); /* source for start image */
    background-repeat: no-repeat;
}

a.link1:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/home_off.jpg); /* source for target image */
} 

a.link2 { /* definition of the "image" class in the <a> tag */
padding:5px 100px 0px 6px;
width:97px;
height:17px;
    background-image:url(../images/register_on.jpg); /* source for start image */
    background-repeat: no-repeat;
}

a.link2:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/register_off.jpg); /* source for target image */
} 

a.link3 { /* definition of the "image" class in the <a> tag */
padding:5px 100px 0px 6px;
width:97px;
height:17px;
    background-image:url(../images/####.jpg); /* source for start image */
    background-repeat: no-repeat;
}

a.link3:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/####.jpg); /* source for target image */
} 

a.link4 { /* definition of the "image" class in the <a> tag */
padding: 5px 100px 0px 6px;
 width:97px;
 height:17px;
     background-image:url(../images/demo_on.jpg); /* source for start image */
     background-repeat: no-repeat;
}

a.link4:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/demo_off.jpg); /* source for target image */
} 

a.link5 { /* definition of the "image" class in the <a> tag */
padding: 5px 100px 0px 6px;
 width:97px;
 height:17px;
     background-image:url(../images/login_on.jpg); /* source for start image */
     background-repeat: no-repeat;
}

a.link5:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/login_off.jpg); /* source for target image */
}

I would like to show the URL but I am under contract on this one. It's just, I am using buttons, they are the same width/height of what is shown there. I have an on version and off. It works fine in IE, it's perfectly aligned. There is a banner

-------------------------------------------------------------------------------------------------

- - - - - -

- - -

- - logo -

- - - link 1 link 2 link 3 link 4 link 5 link 6

-------------------------------------------------------------------------------------------------

The entire banner is a background in a div, the only actual "elements" inside that div, are the buttons. Here is the html

<?php
require_once("./ppassistant/system/core/config.php");

?>

<!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" />

<link rel="stylesheet" type="text/css" href="ppassistant/projectassets/css/style1.css" />

<title>#####</title>

</head>

<body>

<div id="wrap">

<div id="header">

<ul id="toplinks">

<li><a class="link1" href="Home" title="Home"></a></li>

<li><a class="link2" href="Register" title="Register"></a></li>

<li><a class="link3" href="#####" title="######"></a></li>

<li><a class="link4" href="demo" title="Demo"></a></li>

<li><a class="link5" href="login" title="Login"></a></li>

</ul>

</div>

<h2>#######</h2>

<p>This is test content, the server is being constructed, the layout will be started shortly.</p>

</div>

</body>

</html>

I just don't understand it. I have it floated right, then dropped downwards to the bottom of the div, then to the right enough to make it directly in the center, and it looks 100% like the layout I originally recieved.

Then I go to test in IE and it's not even there at all. Another reason is sometimes the images don't load in firefox, so there is a period of a few seconds sometimes where the 2nd image disappears during rollover. It's like it's there (the original image), then they rollover the image flickers away for a second, adn then it appears. Whatever happens, I don't care about the second issue as much as the first, but this is bad. I have to get this layout coded today, and, I finally got the buttons organized, and that happened. Has anyone had this problem, or have any advice. That was my full html file, my FULL css file is below.

/* UNDO.CSS (Thanks TanTek) */
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */


/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

/* END UNDO.CSS */

body {
color: #000000;
background-color: #B2C6EB;
text-align: center;
}

#wrap {
color:#000000;
width:800px;
height:800px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
}

#header {
background: url(../images/banner.gif) no-repeat #FFFFFF;
color: #000000;
width: 800px;
height: 101px;
}
/* HEADER LINKS */

#toplinks {
float:right;
margin-top:80px;
margin-right:130px;
}

#toplinks li {
list-style:none;
display:inline;
}

a.link1 { /* definition of the "image" class in the <a> tag */
padding:5px 100px 0px 6px;
width:97px;
height:17px;
    background-image:url(../images/home_on.jpg); /* source for start image */
    background-repeat: no-repeat;
}

a.link1:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/home_off.jpg); /* source for target image */
} 

a.link2 { /* definition of the "image" class in the <a> tag */
padding:5px 100px 0px 6px;
width:97px;
height:17px;
    background-image:url(../images/register_on.jpg); /* source for start image */
    background-repeat: no-repeat;
}

a.link2:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/register_off.jpg); /* source for target image */
} 

a.link3 { /* definition of the "image" class in the <a> tag */
padding:5px 100px 0px 6px;
width:97px;
height:17px;
    background-image:url(../images/####.jpg); /* source for start image */
    background-repeat: no-repeat;
}

a.link3:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/####.jpg); /* source for target image */
} 

a.link4 { /* definition of the "image" class in the <a> tag */
padding: 5px 100px 0px 6px;
 width:97px;
 height:17px;
     background-image:url(../images/demo_on.jpg); /* source for start image */
     background-repeat: no-repeat;
}

a.link4:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/demo_off.jpg); /* source for target image */
} 

a.link5 { /* definition of the "image" class in the <a> tag */
padding: 5px 100px 0px 6px;
 width:97px;
 height:17px;
     background-image:url(../images/login_on.jpg); /* source for start image */
     background-repeat: no-repeat;
}

a.link5:hover { /* definition of the "image" class for <a> tag when hovered onto */
     background-image: url(../images/login_off.jpg); /* source for target image */
} 



/* END HEADER LINKS */

ToonMariner · March 15, 2007

send us a link...

Ninjakreborn · March 15, 2007

I can't it's under contract.

However I got another CSS person, that mentioned something about IE conditional statements.

<!--[if IE]>

<![endif]-->

After researching the positives and negatives of various types of IE conditional statements, as well as negative impacts, and positive purposes. I have permanently decided to gear something for fire fox and Opera, after it's perfect try my hardest to get it setup for IE if possible, if not I am throwing this in there and easily adjusting it. I also researched that undohtml.css I am utilizing it at the beginning to reduce other's from the start. I have gotten tired of hard workarounds and hours of debugging, all I care about is remaining doing pure CSS as well as getting things done quicker. These 2 solutions double the time. Allow me to focus more on getting it designed properly, and getting it done, while still retaining doing CSS.

jcombs_31 · March 15, 2007

How exactly do you think a conditional statement is going to help if you don't know how to fix it for IE? Do you love to put the solved check next to every post now? Was this actually solved somehow?

mainewoods · March 16, 2007

ff does not respect the width tag for inline items(non standards):

a.link1 { /* definition of the "image" class in the <a> tag */
padding:5px 100px 0px 6px;
width:97px;
height:17px;
    background-image:url(../images/home_on.jpg); /* source for start image */
    background-repeat: no-repeat;
}

code like this for block items can cause 'ie box model problems':

#wrap {
color:#000000;
width:800px;
height:800px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
}

--the problem is that ie uses a different model for the 'width' tag that includes paddings and borders

--you left off 'div' in your settings at the top of your css doc, so ie will use a default of 2px. Add 'div' as well to equalize the box model used by ie and ff:

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

Sign In

[SOLVED] unfair IE, destroying entire elements

Recommended Posts

Ninjakreborn

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

Ninjakreborn

Link to comment

Share on other sites

jcombs_31

Link to comment

Share on other sites

mainewoods

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information