Never Exact Measurements with Layout.

[Dal123]

I was punishing myself for not creating exact mock-up in photoshop but not to concerned about that now:
as it seems it is never exactly the size anyway and such weird things happen. I'm working on my colour scheme at the moment and trying to add graphics for my sidebar; metallic/ polished concrete effect and created it exactly 200 px wide (as firefox developer toolbar said it was this size). For some reason I'm getting a larger border on my right. It's not like this in the image file, what could be causing this .

 

[Dal123]

It just sprung to me; background-repeat:no-repeat; that was it .
One thing I don't get though is that I cannot find out exactly how big my sidebar is. I've tried 'element information' in developer tab (firefox) 'block size' shows everything but the sidebar size and for some reason it shows my footer as massive (vertical) but when it's viewed it's fine but have noticed it in IE. Mysterious?

 

[Ride9650]

It just sprung to me; background-repeat:no-repeat; that was it .
One thing I don't get though is that I cannot find out exactly how big my sidebar is. I've tried 'element information' in developer tab (firefox) 'block size' shows everything but the sidebar size and for some reason it shows my footer as massive (vertical) but when it's viewed it's fine but have noticed it in IE. Mysterious?

glad to see you figured it out.

One program that might be helpful...the name escapes me at the moment, but its pixel....somthing....err....

anyways its an AIR application, so hopefully that'll help narrow it down.
It basically measures anything that's on your screen and spits back the height and width in pixels.

 

[nuxx]

One thing I don't get though is that I cannot find out exactly how big my sidebar is

Because you've not explicitly set any dimensions for div#sidebar, but only it's child element ul#sidbar.

Your browser will calculate the height and width of an element if you omit them. Safari shows the computed style for div#sidebar as

display: block;
height: 0px;
width: 900px;

You could explicitly set the width and then float it:

#sidebar {
    width: 205px;
    float: right;
}

Additionally, you could also change the width of ul#sidbar and remove the float:

#sidbar {
    ........
    float: none;
    width: 100%;
}

 

[Dal123]

I'm a bit confused as I could obtain the measurements before I started playing around with it through the developer toolbar.
I don't really want to set a specific height, as I'll probably mess it up lol, but I must say I'm a little to confused as why this is happening and why I can't obtain information regarding it's height when I obtained it before. As I found the height to be 784px as I designed the sidebar myself in Illustrator . Strange isn't it .
Regards nuxx