Web Hosting Talk






PDA

View Full Version : Style Issue

Danny159
12-20-2008, 02:55 PM
Style Issue

Hey,
I am haveing some issues with an admin panel I am making,
On Firefox and Safari the wrap div tags are centered in the middle by:
margin-left:auto;
margin-right:auto;
As seen here http://roizer.com/images/ff.jpg
But in IE its to the left.... Why is this?
As seen here http://roizer.com/images/ie.jpg
Anyone have any ideas
Daniel





__________________
Web
Infinitas
12-20-2008, 04:12 PM
You should use something like below to center
margin: 0px auto;
text-align: center;
I'm saying this because I've used this in lots of websites. Also I see no problem in IE or firefox or safari or opera or chrome.
Danny159
12-20-2008, 06:41 PM
Worked thanks,





__________________
Web
bear
12-20-2008, 06:42 PM
Moved from programming, because it isn't.





__________________Did you know WHT has rules and a help desk?%20, The Final Frontier
Infinitas
12-24-2008, 12:03 AM
Quote:



Originally Posted by Danny159


Hey,
I am haveing some issues with an admin panel I am making,
On Firefox and Safari the wrap div tags are centered in the middle by:
margin-left:auto;
margin-right:auto;
As seen here http://roizer.com/images/ff.jpg
But in IE its to the left.... Why is this?
As seen here http://roizer.com/images/ie.jpg
Anyone have any ideas
Daniel


If your problem is not solved yet, I want to give you some information that margin: 0 auto; and margin-left: auto; and same for right do not work with IE. page is centered in IE only by text-align: center; So text-align feature is used. This is basically called as css hack for IE.
Thanks
killapix
12-24-2008, 07:57 AM
Sorry but the above statement is not correct. text-align: center; is not a hack to center divs in ie.?text-align: center; is used to center a block of text. Margin: 0 auto; works perfectly fine to center the div in ie but remember to declare a width value, otherwise the div will be 100% of its container by default and the centering will not be apparent.
Use this example:
<style type="text/css">
<!--
.centered_div {
width: 80%;
border: 1px solid #333333;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div class="centered_div">Hi I'm a centered div in IE</div>
</body>
</html>
The border is just to show the position of the div. I don't know why this is appearing to work for you with the text-align: center; but you really do not need to use it, all it should do is center any block of text/content to the center of the div that wraps it. If I add the declaration of text-align: center; to my code example above all it will do is make 'Hi I'm a centered div in IE' center in the container. ?





__________________Filefeed.net - Image Hosting -
killapix
12-24-2008, 08:20 AM
just thought maybe 'Quirks mode' is the problem...?





__________________Filefeed.net - Image Hosting -
Infinitas
12-24-2008, 07:08 PM
Quote:



Originally Posted by killapix


Sorry but the above statement is not correct. text-align: center; is not a hack to center divs in ie.?


Well, if you do not agree with the point its ok. Either my way to put my point was wrong or you're not getting it correctly. So please do not say I'm incorrect.
As per the thread, page is not centered in IE but other browsers. This is not because of div wraps. You must be knowing IE don't follow w3c completely. Due to this, these things usually happens (not always). In most of the site I worked I never used
Code:
text-align: center;
to center the page. I also know the basic function of text-align and margin.
But if you've used
Code:
margin: 0px auto;
in div and not getting the page centered then you should use
Code:
text-align : center;
in body tag. I'm dead sure it will work. Now this kind of usability of css is called css hacks.
I think you got me now.
Quote:


I don't know why this is appearing to work for you with the text-align: center; but you really do not need to use it, all it should do is center any block of text/content to the center of the div that wraps it. If I add the declaration of text-align: center; to my code example above all it will do is make 'Hi I'm a centered div in IE' center in the container. ?


Well, we don't need to use these kinds of things always but sometimes when we have older technology code, improper coding, styling etc..
And if these kind of things started means you'll get no way to solve in simple and definitive ways. That time you must understand the usability of code, browser compatibility etc. and finally need to code like that.
Thanks