Jump to content

[SOLVED] unfair IE, destroying entire elements

Ninjakreborn

By Ninjakreborn
in CSS Help

 Share

Recommended Posts

Ninjakreborn Prolific Member

Ninjakreborn

Posted
Posted

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 */

Link to comment
Share on other sites
Ninjakreborn Prolific Member

Ninjakreborn

Posted
  • Author
Posted

I can't it's under contract.

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

<!--[if IE]>

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

<![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.

Link to comment
Share on other sites
mainewoods Newbie

mainewoods

Posted
Posted

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 }

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.