Is It the pixels that went wrong or just the CSS?

HTML & CSS
1

Hi Everyone,
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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>7_menu</title>
<style type="text/css">
	#menu
	{
	   position:relative;
	   width:920px;
	   height:30px;
	   border:2px solid red;
	}
	#menu ul {position:absolute; border:2px solid green; width:920px; height:30px;top:0px;}
	
</style>
</head>
<body>
	<div id="menu">
		<ul>
			<li class="menu1"><a href="#"></a></li>			
		</ul>
	</div>
</body>
</html>

Could it be something wrong with my display’s pixels ? :slight_smile: More likely, I still know nothing about CSS :frowning:
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.
Thanks

2

Hi :). By default, browsers give default margins and paddings to elements. As such, the <ul> has margins and paddings set (both vertical and horizontal). If you remove them, you will see it fit.

ul{margin:0;padding:0;}

Though it would be better for you to have a full reset on your page to avoid future instances of this. Something like this

3

Hi Ryan ! Thank you so much for that rapid aid. I’ll read the article tomorrow and see if i have more questions. I had my share for today…

4

It’s not really an article so much as a copy+paste+keep it in your archive. A pretty useful ‘boilerplate’, as they call it.

I, personally, use it for all of my projects - thanks to Ryan, of course :smiley:

~TehYoyo

5

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 !

6

Take a look at where he got it from - the “reset” that he cited will help solve a bunch of problems that you normally would be confused about.

~TehYoyo

7

Okay!

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.

8

Thanks Ryan,
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.

9

You ideally should do that. Trim it down. Good job :). Glad I was able to help.

10

  1. I’d question the need for two elements there, the extra outer div might be unnecessary.

  2. border is added TO width, so if you declare the same width on both, and put two px padding, you’ve got a 924px wide ul inside a 920px content area on the outer div.

This is why as a rule I have a single outer div to set the width for everything, then let all the child elements do the normal block behavior of filling whatever’s available.

Much less what on earth are you APo’ing the child UL for?!?

You’ve over-thought… everything; for meaningful help though, we’d have to see the actual page it’s on; but that extra DIV for nothing and APo of the UL is throwing up alarms here.

11

Hi Death…:slight_smile:
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.

12

What does <ul id=“main”> mean? How does one define the “main” ul? Is it a navigation list? A content list?

~TehYoyo

13

Why does his ID naming have any concern to you or his problem? :slight_smile:

Many people do id=“main”. There’s no reason to not use that. As long as the coder knows what it is, it’s fine…

14

But shouldn’t I know what it refers to as well? Isn’t that the point of naming things semantically?

~TehYoyo

15

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.

16

Thanks Ryan,
I was afraid a new error emerged…

17

We need more specifics :).

18

I don’t think we do. :slight_smile: I think deotpit meant that he was afraid (after reading TehYoyo’s post) that a new error had occurred, not that one actually has occurred. (:

19

Oops :confused: Soz about that.

~TehYoyo

20

Oh, I assumed it had nothing to do with that, since what TehYoyo was mentioning wasn’t really an error :p.