Okay, I've done all I can think of, and all I can find on the internet, and still I'm having trouble with this one. I want to display a <h1>'s upper left corner at exactly 150px from the top of it's parent element. I need to get rid of the line break before it in all browsers. I have tried changing the margin properties, the padding properties, and set the <h1> up as an inline element, still not displaying where I want it to. Because IE and FF display it differently no matter what I do, I can't just move the tag up, because then it just underlaps the element above it in one of the 2 browsers. For a better idea, here is the code I'm dealing with: The CSS is in an external stylesheet and the HTML is in the HTML document. I even tried using line-height in the CSS, but that made the visible size of the <h1> in IE to be adjusted to the line-height.
Wow, I made an edit to the previous post, and thought up something to try, and it worked perfectly. What I did, for those that would like to know is I used the display:inline; attribute in the heading class, but then I added line-height:25px; attribute. I had to do some adjusting to come up with the 25px, but it looks right, and is very close to where it is supposed to be in both IE and FF.
Well, yes, headings are block-level elements. What you did is that you "visually" changed it to act like inline-elements. Anyway, if you show us the code you're working with (or the problematic part), then maybe we can come up with a better solution (unless you're happy with this one).
why don't you just make #header div and then #header h1 { all kinds of padding here } no need for position:absolute; etc.... for example I have this in one my templates ..... just so you can see how it is done ... it is all in padding-left and top ... it works in all browsers #header { height : 110px; background-color : #000; background: url(back.png); } #header h1 { padding-left: 10px; padding-top: 12px; font-size: 25px; color: #FFF; } #header h1 a { font-size: 25px; color: #FFF; text-decoration: none;} #header h2 { padding-left: 10px; padding-top: 0px; font-size: 19px; color: #FFE51E; } Code (markup):
The problem I was having was that, well, here is some code: body { font-size:100%; } .header { position:absolute; top:0px; left:0px; width:436px; height:145px; background-image:url('somename.jpg'); } .heading { position:absolute; top:150px; left:0px; height:25px; } Code (markup): I want the upper left corner of the <h1 class="heading"> to be at exactly 150px from the top of the parent element, in this case, lets just say the body. With the <h#> tags, a line break is inserted before and after the element, which pushes the element down further than I want it to be. There are some big differences in how IE and FF display this line break. If there is a better way, I'd certainly love to know how to do it. I know that id's are what's supposed to be used when it will only be used one time, I just find it easier to make everything classes instead.
The first question is why are you using absolute positioning? AP elements have no knowledge of their surroundings, nor do other elements have any knowledge of their existence. Unless there is compelling reason otherwise, absolute positioning of elements should generally be avoided. cheers, gary
The reason that I am using AP is because if I used RP to try to position the elements, I get different results in different browsers. Where the next element is to be placed is left up to the browser to decide, and I want that power to be in my hands. The reason I use it for the .header class, where upper and left are set to 0px, is because I don't want to have to futz around with margins and padding, I just want the element to be placed absolutely where it should be. I do use relative positioning in some situations. For instance, when centering a div, I place text-align:center in the body's CSS, and then create a div I call .main that is positioned relative. Also, if I need a div to expand without having any content other than another div, I'll use relative positioning then too. If my way of thinking is off, I'd like to hear how to do it better, or easier, whichever the case may be.
AP and RP are seldom appropriate for major layout positioning. AP elements are out of the flow, a major problem when dealing with other elements. RP elements keep their in-the-flow position, while the shifted position is out of the flow. These issues lead to unexpected results if you don't fully understand all the ramifications. Static position, the default, is in the flow, and has few gotchas. Combined with float elements, you have a robust combination. You say you don't want to futz around with margins and padding, but those are exactly the appropriate properties for creating space around (margin) an element or space within (padding) an element. You will do yourself a favor if you would become more proficient with css-p while not using AP or RP. The better you get at it, the more you'll realize how little you need them. cheers, gary
Thanks for the tips. You are correct, I am finding that I have issues with positioning, and would surely love an easier way of dealing with the issue. With time and experience, I think that the pro techniques will be a little more obvious to me. I have just recently used the float attribute in my CSS for the first time, so I am gaining in my comfort with it. The reason I say I don't want to futz around with the margins or padding is because the difference in how the major browsers handle those attributes. My problem is that for some reason(excessive compulsive) I want my page to look exactly the same in all browsers, and as a relative newbie, I tend to use the first method I find to accomplish that. That is why I appreciate hearing from more experienced people, because it's people like yourself that give me something else to look for, a basis to begin learning other techniques that work better than the ones I'm using now. Thanks again.
All modern browsers handle padding and margins correctly. IE is not a modern browser, but as long as you trigger standards mode with a proper DTD, IE6 and IE7[1] do ok. There are issues with their buggy margin collapse model, but that's a case by case issue. cheers, gary [1] If you're concerned about IE5.x, don't be. That's a corpse rotting in the grave. The only sane reason to support IE5 is a brain dead client with an anal fixation on excessive backward compatibility—and he's willing to pay through the nose to get it. --gt
I'm not concerned with IE5, just IE6, which is the one on my computer. I have a new problem, perhaps you could help me with.http://www.buyyourgadgets.com/help/index.html Is a site that I am working on. In IE6, on the left side just under the yellow square, there is an image. Under that image is some text, that text in FF is directly under the image, but in IE there is a space. I managed to get rid of the space on the right side under the title bar in both, but for some reason, I can't get rid of it on the left side. Do you have any suggestions? The CSS: body { text-align:center; font-size:100%; font-family:verdana; margin-top:0px; } .main { position:relative; text-align:left; margin-left:auto; margin-right:auto; width:780px; } .header1 { position:absolute; left:0px; top:0px; width:225px; height:225px; background-image:url('cpwlogo.jpg'); } .header2 { position:absolute; left:230px; top:0px; width:550px; height:225px; background-image:url('cpwheader.jpg'); } .content { position:absolute; top:230px; width:780px; left:0px; } .left { float:left; width:225px; } .right { float:right; width:550px; } .right img { float:left; } .titlebar { height:30px; width:550px; background-image:url('titlebarback.gif'); background-repeat:repeat-x; } .titlebar h1 { color:black; display:inline; line-height:25px; font-size:24px; } .left img {float:left;} Code (markup):
I have to ask, why the image instead of <hr />? The hr element is quite styleable. IE preserves a minimum height equal to the line-height of the font size in effect. Not tested; give image {font-size: 0px;}. If that doesn't work, wrap the image tag in span with that style. cheers, gary