Welcome Guest   ·   Login   ·   Register   ·   Member List
Forum Home  >  CSS help  >  Browser check or problems  >  Thread
Search  
  
  Advanced Search
   
 
IE + Horizontally Centered
 
curvwind8
Posted: 07 June 2006 05:35 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2006-06-07

I worked on centering a div horizontally and finally got it to work, but only in Firefox/Safari. Does anyone have a thought for IE?

Reference:
http://robvanwyen.com/cv/sweetgourmet/

<style type="text/css"><!-- 

.test { 
background-color: #1d64bc; 
width: 100%; 
height: 90; 
} 

.opaque { 
opacity: .3; 
filter: alpha(opacity=30); 
} 

body { 
text-align:center; 
} 

#wrapper { 
position:absolute; 
top: 236px; 
margin-left: auto; 
margin-right: auto; 
left: 0; 
right: 0; 
width: 660px; 
text-align: left; 
z-index: 1; 
} 

--></style> 
Profile
 
 
jalapenomultimediadesigns
Posted: 08 June 2006 11:20 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  8
Joined  2006-02-28

Usually setting

margin:0 auto; 
works for both platforms. However, I have found that sometimes IE still wants to be a whiney little 2-year old about the situation. If that is the case, I then divert to creating a seperate stylesheet for IE and overwritting that div by setting
position:absolute; 
left:50%; 
and
margin-left:-a; 

where “a” is 1/2 the width of the div. Basically you are just offsetting it back 50% so it actually is centered.

...whew that’s alot of extra work for just one div, but so is the life for as long as IE (6 and lower at least) is around.

To reference your seperate stylesheet (if you need to take the second route), just link that stylesheet with a conditional statement (below) in the header AFTER the first/default stylesheet:

<!--[if lte IE 6.0]>
<link href="styleIE.css" rel="stylesheet" type="text/css">
<![endif]--> 

Hope this helps! :)

Profile
 
 
vladimirallen
Posted: 14 June 2006 09:56 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  19
Joined  2006-05-22

Mr. Curvwind8,

goto http://studio9.ws/sweet/sweetgourmet.html and look at the source code.

There’s a 101 ways that you can approach this.  Below is 1.

You want to keep web page optimization for search engines in mind, as well as appearance and layout.
Use web standards.

Complete code took 5 minutes only because my fingers have Arthur Itis.
I had to cut-n-snip your images a bit, as well.

First, it’s VALID.
Second, we did away with your image map navigation.

You want your navigation useable and accessible.

And yes, it centers in Mozilla and MSIE, very nicely, easily, simply.
Will also look good in Opera and Netscape (mozilla), not sure on MACS ??

Got any Q’s, contact me.  We’ll get your gourmet cookin.

Kind regards and it’s lookin good~!
Vladimir Toman

Profile
 
 
curvwind8
Posted: 15 June 2006 02:15 PM   [ Ignore ]   [ # 3 ]
Newbie
Rank
Total Posts:  2
Joined  2006-06-07

thank you so much, you’re very generous. cheers!

Profile
 
 
   
 
 
‹‹ Gallery rendering badly in IE6      Browser display problem ››