Chrome and live view show site perfectly...IE and Firefox NOT!

Toggle sidebar Toggle sidebar
D

dalearyous

Senior member
Jan 8, 2006
836
0
0
what would keep my site from showing up centered in chrome but not centered in IE or firefox?

ok now firefox is showing correctly, IE not:

my CSS code:

#container
{
width:1024px;
margin-left: auto;
margin-right: auto;
}

and why does my site look jacked up in IE but not chrome or firefox;
 
Last edited:
Snapster

Snapster

Diamond Member
Oct 14, 2001
3,916
0
0
You need a doctype to tell IE to render in standards mode rather than quirks mode.

Code: 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

or

Code: 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


my example:
Code: 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>test</title> 
        <style type="text/css">
            #container
            {
                width:1024px;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>    
    <body>
    <div id="container">
        hello        
        </div>
    </body>
</html>
 
Snapster

Snapster

Diamond Member
Oct 14, 2001
3,916
0
0
If you mean the spaces between images, this is usually cause by having space between the <td> and the <img /> tags... stupid I know but it's something IE is very narky about. Also make sure you close single tags like br and img eg <img src="" />
 
D

dalearyous

Senior member
Jan 8, 2006
836
0
0
so...for instance lets say i have this:

Code: 
<td colspan="3">
	<img src="images/wcsliced_19.gif" width="282" height="22" alt=""></td>

i should make sure there is no space between <td colspan="3"> and <img src="images/wcsliced_19.gif" width="282" height="22" alt=""></td> and close the img tag so the final product would look like this:

Code: 
<td colspan="3"><img src="images/wcsliced_19.gif" width="282" height="22" alt="" /></td>

there is just like one line of spacing near the top that is not correct, throwing everything off
 
Last edited:
Snapster

Snapster

Diamond Member
Oct 14, 2001
3,916
0
0
Correct, that's how you would close the img tag.

The main reason you are getting lines is because it's actually spaces being created by the table breaking slightly in IE so you are actually seeing the background colour of your container (which is white). It's actually a pretty good example of why you shouldn't really lay out content as tables, but I know you've just exported this as a sliced design from Photoshop or similar.

If you really want to use tables, you might want to consider having multiple tables stacked on top of eachother so you get less columns / spacers created by the export, this obviously requires more work and more thought how to break up a design into blocks.
 
D

dalearyous

Senior member
Jan 8, 2006
836
0
0
if i wasn't going to use tables, what would you recommend?

omg fixed it with:
Code: 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100&#37;;
}
 
Last edited:
CoinOperatedBoy

CoinOperatedBoy

Golden Member
Dec 11, 2008
1,809
0
76
dalearyous said:
if i wasn't going to use tables, what would you recommend?

omg fixed it with:
Code: 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
}
Click to expand...

You should use divs and position them with a stylesheet.
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom