Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE centering

Status
Not open for further replies.
amiw

amiw

Programmer
Apr 1, 2003
113
GB
I read "IE5/Win incorrectly applies the CSS "text-align" attribute to block-level elements. Declaring "text-align:center" for the containing block-level element (often the BODY element) horizontally centers the box in IE5/Win....Declaring "text-align:center" for the containing block-level element (often the BODY element) horizontally centers the box in IE5/Win. "

Is this suggesting that text-align was never meant to be used to center div's in CSS? and that setting a div's right and left margin widths to "auto" was the desired way? though IE doesn't work this way.
 
Sort by date Sort by votes
Yes, that is correct. IE6 with a proper doctype (thus operating in standards mode) will correctly apply the margin: 0 auto; declaration. So, even IE has adhered to the standards in this matter. All other browsers will behave correctly and use the margins to center block level elements and text-align to center text and inline elements.
 
Upvote 0 Downvote
This is a layout that I am trying to create
Not too sure about how to go about this.
Should I use a container div and 2 div's within, one for the links and one for the image?
Should I float the image or use it as a background for the div?
How should the 3 columns of links work?

any help would be greatly appreciated.
 
Upvote 0 Downvote
I would go with a container and four floated elements. Three divs (or even paragraphs) and one img. You could do it with a background, but I feel that that image is more of a content than a layout.
 
Upvote 0 Downvote
If I used 3 div's should I not also put the image in a div and have a fourth div?
should I put a percentage on the div's
with the links going down horizontally should I use a list menu?

how would the code look?

thanks.
 
Upvote 0 Downvote
how would the code look?
Click to expand...
Put down the mouse... slowly stand up and take a step back from the computer. When you have thought about the problem and taken some steps toward working out a solution for yourself, then you will find plenty of people willing to help.

Begging for code to your problem is not the right way forward.

Jeff


[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
fair point, this is the code that I came up with...
it's look ok, is there anything obviously wrong with it?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<title>test</title>
<style type="text/css">

#container {
width: 700px;
margin: 0 auto;
border: 2px solid #112b80;
}

div.box {
width: 22%;
margin: 2px 2px;
float: left;
padding: 2px;
}

</style>
<head>
<body>

<div id="container">
<div class="box">links<br />links<br />links<br />links<br /></div>
<div class="box">links<br />links<br />links<br />links<br /></div>
<div class="box">links<br />links<br />links<br />links<br /></div>
<div class="box"><img scr="test.gif"></div>
</div>

</body>
</html>
 
Upvote 0 Downvote
Jeff is right. Your code would look like an array of letters, arranged just right to produce the desired effect. We have given you a lot of examples so far and frankly adapting those to what you need right now should be pretty easy. I think it is good that you ask experts for guidance rather than mocking something up on your own, but you do not need to ask us to write the code for you.
 
Upvote 0 Downvote
make a correction and it now works in IE and firefox. I Sorry made corrections - gave the container a height and rather than put a div around the image I used the img selector.

An issue would be the width percentage... for instance if i set it to 22% then it might force the image down below, is there a was to make this more liquid so that the image will always fit in snugly?

div.box {
width: 12%;
margin: 2px 2px;
float: left;
padding: 2px;
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<title>test</title>
<style type="text/css">

#container {
width: 700px;
height:160px;
margin: 0 auto;
border: 2px solid #112b80;
}

div.box {
width: 12%;
margin: 2px 2px;
float: left;
padding: 2px;
}
img
{
float:right;
}
</style>
<head>
<body>

<div id="container">
<div class="box">links<br />links<br />links<br />links<br /></div>
<div class="box">links<br />links<br />links<br />links<br /></div>
<div class="box">links<br />links<br />links<br />links<br /></div>
<img src="/europasearch/images/advert.jpg">
</div>

</body>
</html>
 
Upvote 0 Downvote
I don't understand. Since your container is fixed size, you could specify widths of divs in fixed pixels to make them as snug as possible. Or you can just play with the percentages, as long as the parent is fixed size, those percentages will stay fixed as well.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
185
pendle666
pendle666
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
273
ChrisHirst
ChrisHirst
GRIFFIJ
  • Locked
  • Question
Centering navigation bar
Replies
2
Views
137
vacunita
vacunita
1DMF
  • Locked
  • Question
Stop IE showing tooltip for required form fields on hover 1
Replies
0
Views
77
1DMF
1DMF
1DMF
  • Locked
  • Question
IE 11 Compat Mode &amp; @font-face with woff 1
Replies
4
Views
156
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top