Log in

View Full Version : IE7 problem with center / firefox good???


Chadi
01-03-2008, 07:19 AM
https://www.logicweb.com/billing

This is properly centered in Firefox 2, but not in IE7 and I cannot for the life of me figure out why. The site in general works fine in Firefox and IE7, except the billing area which has its own stylesheet.css file (along with my site's own css files). I do not know where the issue is causing IE7 not to be centered. Any help is appreciated.

Not only that, the footer appears crushed in IE7 (footer is the blue rectangle area with the text menu, see screenshot).

http://aycu01.webshots.com/image/38400/2000979427523572444_rs.jpg (http://allyoucanupload.webshots.com/v/2000979427523572444)
tech_support
01-03-2008, 09:18 AM
When you align <div>s with IE, you'll need to add margin:0 auto; with text-align:center;
Chadi
01-03-2008, 04:22 PM
Thanks for the reply. Could you please explain which code I should fix and what the exact code should be? Unfortunately the original designer of the site left me hanging here and I'm just a learner at this stage.
jscheuer1
01-03-2008, 05:30 PM
Instead, I would recommend using a strict DOCTYPE for that page, replace:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

with:


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

After that, the <br> clear kludge won't work in FF, so change:


<br style="clear:both;" />
<br />

<div class="f_cc">
<h4 class="footer-navigation-cc">
<img alt="Credit Cards" src="/images/accept.gif" width="750" height="50" /></h4>
</div>
</div>
</div>

</body>

to:


<br />
<div style="clear:both;height:65px;">

<div class="f_cc">
<h4 class="footer-navigation-cc">
<img alt="Credit Cards" src="/images/accept.gif" width="750" height="50" /></h4>
</div>
</div>
</div>
</div>

</body>
Chadi
01-03-2008, 06:06 PM
Thanks, that helped but with abnormal side effects.

I tried the doctype that I'm using throughout the site itself and it worked too

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


But, there is one problem now. The graph bars no longer appear (also did not appear with your suggested doctype). Its being conflicted somewhere. The billing system was created a few years ago where things where less 'standard' at the time.
jscheuer1
01-03-2008, 06:39 PM
What page is that from? Anyways, in standards mode, most browsers require that units in style for width, height, margins, padding, top and left be specified. That old outmoded DOCTYPE would let you use:


#someId {
width:30;
}

In standards mode, you need:


#someId {
width:30px;
}

This is also true of inline style, and scripted style changes or assignments, but not for element attributes.

So, actually, the advice given by tech_support might not be so bad in this case, because unless you are willing to go and debug that other stuff, you will have to stick with quirks mode.

To follow tech_support's advice, you must find where margins are set to auto, and either center that element via its style or its parent's style, if no parent exists, one must be written into the code. Like:


#header{

margin:auto;

width:834px;

}

Becomes:


#header{

margin:auto;
text-align:center;
width:834px;

}

OR, if that doesn't work, a container division must be placed entirely around the header element with its text-align property set to center. If there is already a container, you may set its text-align property to center.
Chadi
01-06-2008, 06:25 AM
This is very confusing. You see, everything works fine in Firefox.

In IE7, this odd is that the login page is properly centered BUT once you login, it is left aligned again???

I tried using these and they were left aligned in IE

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

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

(this one even screwed up firefox within the billing system after login)


text-align:center; messed up the top menu by aligning them center which I do not want either.
Chadi
01-06-2008, 06:33 AM
This method works but has one major issue which oddly affects firefox only (go figure)

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


See attached. The first image is the top of the menu, then there is a HUGE almost entire body of white below it, then the client profile is stacked on top of the footer. Its crazy.

I've attached the php file that involves this.
jscheuer1
01-06-2008, 05:47 PM
text-align:center; messed up the top menu by aligning them center which I do not want either.

Well, once you've begun aligning things to center:


<div style="text-align:center;">
This is in the center.
</div>

Everything in there will be centered, unless you change it:


<div style="text-align:center;border:2px solid red;">
<div style="text-align:left;width:50%;margin:0 auto;border:2px solid green;">
This is aligned left and, since its width is less than its parent,
it's in the center of its centering parent.
</div>
This is in the center.
</div>