CSS Forum

**Webmaster Chris** · 06-30-2008, 05:43 PM

alright so
it displays exactly how i wan't in firefox, but internet explorer 7 completely and utterly destroys it.
i currently don't have hosting or a domain, so i can't really show it that way, but hopefully you can tell from the coding.
if theres anything else i can do lemme know.
but it's not even close to readable in internet explorer.. ie just blows it up.
and i hav eno clue how to fix it. ty

HTML

Code:

<html>
<head>
<title>My Paintball Gear</title>
<link rel="stylesheet" type="text/css"
href="paintballcss.css" />
</head>
<body>
<p class="fade">
<img src="header.gif" class="center">
<p class="bord">
<br>
<div align=center class="links">
<a href="home.html" target="_self">Home</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="gun.html" target="_self">Marker</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="hopper.html" target="_self">Hopper</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="mask.html" target="_self">Mask</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="air.html" target="_self">Air</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="podpack.html" target="_self">Pod Pack</a><br>
<h2 class="heading">Hopper</h2><br>
</div><img src="blackfaderight.png" align=right class="blackfade"><br>
<img src="shootanim.gif" class="shoot">

<h3 class="descripthead">Vlocity Jr.</h3>
<img src="hopper.png" class="mainpics">

<ul>
<li>    1 force mode setting </li>
<li>    20bps on marker feed rate </li>
<li>     25bps free fall rate</li>
<li>     180 ball count capacity</li>
<li>     Instant auto anti-jam</li>
<li>     Upgradeable software</li>
<li>     Double vision system</li>
<li>     Giant mouth lid for quick and easy loading in tight spots</li>
<li>     3 blade spring loaded paddle</li>
<li>     On/off switch with shield reduces accidental activation</li>
</ul>

<h3 class="descripthead">Virtue Chip</h3>
<img src="virtue.png" class="mainpics">

<ul>
<li>Fits the Viewloader VLocity, VLocity Jr., and VLocity XSV loaders</li>
<li>The only Viewloader Factory Approved upgrade - won't void your warranty!</li>
<li>300% increase in battery life</li>
<li>Custom user definable mode - specifiy the precise settings of your VLocity with thousands of possible combinations</li>
<li>Breaking Setting - "one touch" Breaking Setting instantly configures your hopper and tension settings for max feed rates on the breakout</li>
<li>Adjustable Tension - 12 force settings allow you to precisely control the pressure on the ball stack for increased out of the gate speed, improved battery life, and gentliness on paint</li>
<li>Decreasing Stack Tension (DST) - save battery power & improves performance by allowing you to set the stack tension to decrease over time when your gun is not shooting.</li>
<li>Electronic Anti-Jam Logic - Adjustable anti-jam setting allows you control the anti-jam logic to compensate for brittle or hard shelled paint.</li>
<li>Instant Unjam - Just tap the button to manually clear a jam.</li>
<li>Smooth Drive Operation - enhanced motor programming to allow for smoother, more consistent feeding & reduced wear on the internals.</li>
<li>Battery Mode Setting - Optimize performance based on the use of Lithium Ion or Alkaline batteries</li>
<li>Low Battery Indicator - LED alerts you when your batteries are at 25% battery capacity</li>
<li>Sleep Mode - save batteries with 10 minute idle sleep mode</li>
<li>Easy Programming Menu similar to Virtue gun software </li>
</ul>

</body>
</html>

CSS

Code:

body{ 
    background-color: #8899CC;
    font-family: arial;
    font-size: 110%;
    margin: 0px;
    padding: 0px;
    border-top-style: solid;
    border-top-width: 4px;
}
    

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
p.fade {
    background-image: url(blackfade.png);
    background-repeat: no-repeat;
    position: relative;
    top: 0;
}
img.blackfade {
    background-repeat: no-repeat;
    position: relative;
    top: -310;
    left: 0px;
    z-index: auto;
}
p.bord {    
    background-image: url(bord.gif);
    background-repeat: repeat-x;
    position: relative;
    top: -20;
    margin: 0px;
    padding: 0px;
    z-index: 6;
}
img.shoot {
    background-image: url(shootanim.gif);
    background-repeat: no-repeat;
    position: relative;
    top: -411 ;
    width: 100%;
    margin: 0px;
    padding: 0px;
    z-index: auto; 
    border-style: solid;
    border-bottom-width: 1px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
div.links {
    position: relative;
    top: -25;
    z-index: 4;
}
a:link {
    color: black;
    font-size: 14px;
    font-family: sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}
a:visited {
    color: black;
    font-size: 14px;
    font-family: sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}
a:hover {     color: black;
    font-size: 14px;
    font-family: sans-serif;
    text-transform: uppercase;
    text-decoration: underline;
}
a:active {     
    color: black;
    font-size: 14px;
    font-family: sans-serif;
    text-transform: uppercase;
    text-decoration: none;
}
a {
    font-weight: bold;
}
h2.heading {
    color: black;
    font-size: 25px;
    font-family: serif;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    top: 0;
    border-style: dotted;
    width: 20%;
}
img.mainpics {
    z-index: 2;
    position: relative;
    top: -375;
    position: relative;
    left: 8%;
    margin: none;
}
h3.descripthead {
    text-align:center;
    position: relative;
    top: -290;
    font-family: sans-serif;
    font-stretch: semi-condensed;
    font-weight: 900;
    text-decoration: underline;
    z-index: 6;
}
ul { 
    list-style-type: square;
    color: white;
    font-size: 15px;
    text-align: center;
    background-color: black;
    border-color: white;
    border-style: solid;
    border-width: 3px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: -500;
    margin-top: none;
    margin-bottom: none;
    display: block;
}
object {
    position: relative;
    top: -396;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

**wayfarer07** · 06-30-2008, 07:19 PM

HTML Code:

<html>
<head>

Your document should have a proper DOCTYPE, otherwise you are throwing the browsers into quirks mode, which does slightly different things in IE than Firefox, and is a less advanced way of rendering HTML and CSS.

HTML Code:

<div align="center">

Don't ever align things this way, there are better ways of centering things, and it is depreciated.

In your CSS:
Remove "position: relative" from EVERYTHING. Don't use it until you understand what it is for.

Once you do all of the above, come back and we'll work our way through any additional problems. Read the stickies here: http://www.webmaster-talk.com/css-fo...r-website.html to learn about how to center things.

**Webmaster Chris** · 07-01-2008, 12:06 AM

Quote:

Originally Posted by wayfarer07

HTML Code:

<html>
<head>

Your document should have a proper DOCTYPE, otherwise you are throwing the browsers into quirks mode, which does slightly different things in IE than Firefox, and is a less advanced way of rendering HTML and CSS.

HTML Code:

<div align="center">

Don't ever align things this way, there are better ways of centering things, and it is depreciated.

In your CSS:
Remove "position: relative" from EVERYTHING. Don't use it until you understand what it is for.

Once you do all of the above, come back and we'll work our way through any additional problems. Read the stickies here: http://www.webmaster-talk.com/css-fo...r-website.html to learn about how to center things.

ok so

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

i used that on the top, and it completely screwed everything up, but i have to say that it looks equally screwed up in firefox as well as ie now

.
is it screwed up just because i was coding to have it work without the DOCTYPE before? if so i think i'm going to start from scratch, clean stuff up too while im at it.

ok and
i used
text-align: center;
in the css for the div, and got rid of the <div align="center"
and then i put this into the <h2> spot in the css
display: inline;
because my h2 was also in the div, and text-align: center dosen't work for block, i changed it to inline.
is this acceptable?
it did slightly change the appearance but not necessarily in a bad way.

and i was using position: relative to either position my elements or for things like the z-index which required a position:
is this wrong? and if so whats a good thing to read on it. i'm starting to not like the tutorial site i have been using

thank you for the help
this is the first website i've tried to make, and i'm just doing it for practice anyways, so i'm sure theres tons of errors. ty for workin with it.

**LadynRed** · 07-01-2008, 03:33 PM

Quote:

i used that on the top, and it completely screwed everything up

Not exactly - now it's showing you how it looks given the state of your code and highlights the problems with your code that you need to fix.

In order to center your site, you need to give the 'wrapper' div a width, then you use margin: 0 auto; in the CSS to center it.

Quote:

and i was using position: relative to either position my elements or for things like the z-index which required a position:
is this wrong?

No, because z-index only works on positioned elements. What Wayfarer meant is that you just do not need to use positioning at all except in certain cases. You need to learn to use the normal document flow and floats to lay out your page.

You might want to read this: http://www.barelyfitz.com/screencast...s/positioning/

and this: http://css.maxdesign.com.au/floatutorial/

**Webmaster Chris** · 07-01-2008, 04:14 PM

hmm alright i'll be going over thoes sites, and redoing my site.
then i'll probably need more help lol!
ty

**LadynRed** · 07-01-2008, 08:05 PM

No problem.. that's what we hang out here for

**tehfincheh** · 07-03-2008, 07:22 PM

Good luck, and stick to designing in Firefox first!

It's always easier to downgrade and make a website compatible for IE using CSS hacks. Same for Safari (although Safari is much less frustrating to fix).

**sandyk3** · 07-03-2008, 10:26 PM

You don't need "hacks", just a different way of styling using CSS. Stay away from "hacks" and I know LadynRed would agree with me. Set up your page styling for FF and Safari first and THEN find out what special CSS you need and use a separate style sheet for IE6 and 7.

**tehfincheh** · 07-04-2008, 04:31 AM

Some effects are impossible to achieve across all browsers without the use of hacks or seperate stylesheets.

If I was designing for myself, I would change the flats accordingly. But as somebody who gets supplied PSDs to cut in to carbon copy CSS matches by a design department, there are times where hacks are the only option.

I don't use multiple stylesheets as it would make the process of updating some very large websites four times as long.

**wayfarer07** · 07-04-2008, 10:05 AM

Quote:

I don't use multiple stylesheets as it would make the process of updating some very large websites four times as long.

Cheers to that.

I use hacks inline with the rest of my CSS also, as it saves a lot of time in development. I do realize, however, that I may get into trouble someday because of it. My rational is that it isn't really going to be that much different than updating an external sheet, if anything ever breaks.

The one downside to hacking, which doesn't come up as much, is that my stylesheets are more difficult to read than externals selected by conditional-comments, which are totally obvious, and everyone knows about them. Even though I use very common selectors (_IE6 *IE7 and below), some people are not familiar with them, even good professionals, and don't always know what they are looking at when they read them.

**tehfincheh** · 07-04-2008, 10:30 AM

Yeah, I make an effort to leave comments stating the browser version and hack purpose every time I use one (easy to forget when you're tearing through code to meet deadlines though!).

There will always be some who prefer the safety first approach, but I find it easier to hack my CSS than explain to a grouchy banker why his website looks a little different in IE6 compared to the fancy PSD that our design department pitched him with.

**LadynRed** · 10:36 AM

CSS hacks, IMO, are risky. At some point those hacks are going to cause breakage as browsers (lets get real - IE!) evolves. The *html hack is a perfect example - worked for IE6 and below, but IE7 will choke on it, and will do so in IE8 too since it's supposed to be far more standards compliant that it's predecessors.

I really don't see how maintaining separate stylesheets with a few lines of CSS in them can be such a hassle - unless you're completely duplicating the full CSS - which is completely unnecessary. My sites typically have 3 css files - the main one for all the decent browsers, and 2 'ie fixes' files, one for IE6 and below, and one for IE7, which to date has not been needed since we're very careful with our coding. At most, my 'iefixes' file for IE6 and older contain maybe 20 lines of css.. usually less though.