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!
It looks sweet enough in Firefox and Safari on the Mac.
I would guess that most of your problems in IE are because you haven’t positioned half of the stuff on the page. You really should be either floating your divs or using absolute positioning. Margins and padding are for tweaking the contents of the divs, and not for positioning the divs themselves in your layout.
It is not neccesary to put a wrapper on the body, you can use the body tag itself as a hook for your background.
It might make more sense to have your header image as a background to the #header div rather than the #main div.
Your #news div was falling below the #homecontent because you were telling it to clear.
Not sure about the rounded corners problem, but I thought IE didn’t support them, though I do stand to be corrected.
Like I said, the page looks great and good on you for coming over from the dark side. I know CSS can be a pain to learn sometimes, but persevere, eventually it will ‘click’ and you will wonder how anyone can use tables for layout.
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.
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.
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:
now have a play with that and see what happens :)
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-)
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
Personally I am more of a "float" kinda guy. I only ever use relative/absolute positioning if I want something outside the flow of the page.
I suspect that your height problems and disappearing footer are precisely because you are using absolutes and not letting the content flow.
Good article here http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/. Check out the links in the article too.
As for font weights, I’m afraid that is just the difference between browsers, not a lot you can do about it.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".