Feed Back, Tips and IE6 Help

[sweetback]

Hey Everyone,

I just completed my first build with xhtml and css only. Have been using tables for a long time, but wanted to get with the times! Things went pretty well for my first time solo, but I wanted to show it to the experts and see if you guys had any tips or feedback on how I did. The page is up at http://www.motoverdeonline.com/custom

Problems I ran into:

– Page looks ok in Firefox and IE7, but IE6 looks all crazy. Anyone know why? Seems like a box model problem maybe with spacing?

– Used rounded box corners but in those 3 boxes, extra space is added on Firefox but not IE7???

– Had to use a margin-top of -257 to bring the #news div up. Not sure why it was below the #homecontent div. Even tried floating the #homecontent left but #news was still way below it. (257 px to be exact)

Thank you so much for your time in advance! I really look forward to hearing your thoughts and tips!

[Rob MacKay]

"apostrophe" wrote:

Not sure about the rounded corners problem, but I thought IE didn’t support them, though I do stand to be corrected.

You are correct :) IE wouldnt know what a rounded corner was if you slapped Mr Gates with one…

[sweetback]

Thanks for the reply guys. The questions was actually about spacing issues in those boxes… I see that IE won’t handle the rounded corners, and given the hate posts I have read about IE, I wouldn’t expect it to! :)

The questions was, why is there extra space in firefox at the top of those boxes, as compared to IE7. I had to add padding to the top so the pictures wouldn’t push through the top of the box in IE, but in Firefox they looked fine. After doing that, the spacing in IE7 is ok, and Firefox has extra space now.

[Rob MacKay]

its probably because you are using margin to position boxes – when you arent ment to do that, naughty naughty and so on… lol

Problem with using margin and padding to move boxes into positon is that IE likes yet again to make its own rules up…

what you need to do is set the same margin left and margin top values but use the position and left, top CSS.

for example

position:absolute;
left:20px;
top:40px;

or whatever.

Also make sure you give the div containing the boxes a position of relative, then the boxes will know where to get their position from :)

so add this to #content:

position:relative;

now have a play with that and see what happens :)

[sweetback]

This is great info to get. For some reason, a lot of the tutorials that I took while learning positioned things with margin and padding, and I am getting the message that this use of those attributes in not a good way to go! :D

So, basically, when you layout with css, you give every div a position of either relative or absolute and then use top left right etc with a px value? Seems a lot easier.

Does using position:absolute make an element change places when a browser is resized?

I will try to redo some of this code in the morning and report back. Thanks so much for your help so far! I have learned a lot today just by hearing from you guys. 8-)

[sweetback]

I redid the code today using your suggestions. I positioned divs with the position: relative or absolute and then used top, left etc. Seemed to clear up a lot of the problems in IE6! Thanks!

Some other questions for those who might know. I had to specify a height on the #content div to get the #branding to stay below it. I would much rather have branding be in the "flow" of the page and have #content be able to expand and contract based on how much text is there. Does anyone know where I messed up in the code because it is not working like that. If I take out the height attribute, and don’t position the #branding div then it jumps up into the middle of the #content div. So weird. I might be missing something very obvious here… if so, sorry!

Also, for some reason, the #footer doesn’t show up in IE6. The page just stops without even showing the end of the #branding div. Anyone seen this before?

Very minor issue, but is Safari, the h1 weight seems to be heavier than in all other browsers (even IE) and it throws off the aligning of the text in the #mainpic box. I used a css reset and even specified font-weight: normal.

So, my biggest question at this point in my first solo project is… when do you use float vs. position: relative vs. position: absolute. I took out ALL the floats on the page, because with your suggestions, I could simply put the divs just where I wanted them. With this being the case, when do you use a float at all?

Thanks so much, this forum is amazing! :D

[Author]

Posts