The following code has a menu item of 920px width and 30px height. Within the menu item there is a ul item of the same size.
Both items are surounded with borders. “Menu” is surounded with red lines and “ul” is surounded with green.
The screen shot attached shows the green rectangular (ul) wider then the red and situated at its’ parent middle height although
i defined its’ “top” as 0 px.
Could it be something wrong with my display’s pixels ? More likely, I still know nothing about CSS
I’ll be grateful if someone explains me why widths defined as 920px both, have different width and why “top” defined as 0 is greater then zero.
Hi, I copied/pasted Ryan’s CSS and miracoulusly the 2 rectangles became overlapping. Still I have to see what excactly made it different because my real problem was, i had 10 menu items of 100 pixels idth each and a ul item of 1000 pixel. The 10 menu items did not fit into 1000 width. I’ll see if the new downloaded style will solve my original problem.
Either way, all future style in future will contain that Ryan’s style.
Thanks a lot Ryan !
As mentioned some elements have default styles applied. Have you wondered why a <p> tag holds a bit of space between other elements? That’s the vertical margins that get applied to it. You just have to tinker around sometime and figure out which elements get default styles. <div>, for example, are one of the few elements that have NO styles added at all. <p>, all the headers (H1 to H6), <ul> OLs…all have some default stuff.
In the reset I linked, one of hte very first rules select a buttload of elements and reset it to margin:0;padding:0; (along with a myriad of other stuff). A good chunk of them have default margins/paddings applied. It gives it a level playing field and stops any potential issues like you just had.
I knew that elements have their default margins but i couldn’t pin point which was the reason to my elements scattering all over the
page. I used the reset block which i downloaded from the link in your post, removing selectors i know i’m not going to use and all the elements reassembled to where they belong to.
I’m truely grateful to you.
Thanks for your reference.
The first div I inserted because the first thing I did was deviding my page into few main elements.
Eventually, it turned out that I could change the main UL into :"<ul id=“main”> and get rid of that first div. So i did in accordance with
your advise. The 2 ULs, I couldn’t get rid of any because the first stands for the main menu and the other for submenu. It was ill
presented in my post I have to admit :-(. Maybe I should have prsented the whole page as is but i wanted to concentrate on the problem that came across and not to let the Gurus of this forum to do the whole job for me…
Your posts are very valuable and I thank you for that.
You don’t have to because you won’t be doing anything with his code, although I was mainly questioning your random question, when all is fixed and there’s no reason to bring up that topic of discussion ;).
For me, as long as the id/class isn’t abstract or describing the contents, it’s okay for me.