• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

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

D

dalearyous

Senior member
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:
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>
 
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="" />
 
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:
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.
 
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:
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

Back
Top