Why am I 1px out with my list elements? - html

trying to reproduce the header here, and so far i have this http://www.webdevout.net/test?0A. I can't figure out why the text containers extend out below the bottom of the bar by 1px, and why they dont on the other site.
Thanks

i have fixed it here:
http://jsfiddle.net/HZLC4/1/
i removed the width of wrapper to fit in JSFiddle's display. you can add it back.
tips to note though:
reset always comes first
to have friendly links, pad the links. makes the links have bigger "box" to click on
padding links and text adds height to the parent container so you wont have to declare height for the wrapper.
divs autofit to content if it has no dimensions declared. it means divs autofit the links and text resulting in to no more "1px problem"
i forgot, for link padding to take effect, <a> must be styled with display:block

You set line-height for .header h1 to 11px, but actually you need only 10px.

The problem is the header styling:
header li, header h1 {
display: block;
font-weight: bold;
font-size: 12px;
line-height: 11px;
padding: 20px;
background-color: #2d2d2d;
border-right: 1px solid #333;
}
padding-top 20px + padding-bottom 20px + line-height 11px = 51px
Either you need to increase the height of the header to 51px, or you need to decrease either padding or line-height.

Dont know if you can see it.
But i changed line-height from 11 to 10 on
header li, header h1 {
And that worked.

Related

CSS Sidebar Background Color Full Width

Hi I’m developing a site: HERE
My sidebar background color seems to be not getting in full width ,it has weird margin at right part. I have tried to manage by increase the size and move left by adjusting the padding at the left but the right side seems to be at is even if making the size of the background to 100% or 200%.
`
.sidebar .widgettitle {
margin-left: -50px; !important;
background:#606060;
padding:10px 0px 10px 25px;
text-transform:uppercase !important;
width: 210%;
max-width: 210%;
background-size: 210% auto !important;
height: auto;
}
`
It seems that css class container has a padding on both left and right at the value of 50 pixels. You can overwrite this in your own CSS file.
pic showing .container style in grid.css
The answer by Anmol Nandha is correct - it is caused by the .container element having padding-left and padding-right of 50px.
You could remove the specific styling in your grid.css, or if you don't want to edit framework files, you might consider adding a id attribute on the .container element, and cancel out the effects by setting padding-left and padding-right to 0.
Note that if you do that, then the contents in the left (main) part will stick to the edge. You might want to add padding-left: 50px on the .entry-content-wrapper to compensate for it.
Of course there is the option to tweak the CSS of your sidebar instead, but I have outlined the easiest way (in my opinion) to fix it.

Vertical align: middle is slightly off at the top

I've recently started to learn CSS, and I've come across something I just can't figure out.
http://jsfiddle.net/HDKsq/7/ is my fiddle.
I'm trying to set the buttons in my navbar to be aligned perfectly in the middle vertically. The buttons are elements in an unordered list, and I've set them to vertical-align:middle; but the space on top of the buttons is visibly larger than the bottom, am I using the wrong syntax?
ul li{
list-style:none;
display:table-cell;
vertical-align: middle;
border: 2px solid white;
padding-right : 10px;
padding-left: 10px;
background-color:black;
border-radius:6px;
line-height:100%;
text-align:center;
width: 150px;
for clarification this is what I'm asking about
Change the following line:
padding: 10px 10px;
to
padding: 6px 10px 10px;
To center the lis, you'll have to manually adjust the padding. This has to do with the height of the picture you have for the home logo. If that remains at 30px, then you need to adjust because it's affecting the height of the lis, which have a line-height of 100% (meaning the text will adjust to the height of the picture). Therefore, depending on the size of the picture used, you'll need to specify the padding-top, since the picture will flow downwards (it's larger than the size it should be to center).
fiddle
Please forgive my use of a placeholder kitten. I hope you don't break out into tears of joy.
It's perfect man, just because of small 'g' in Google you feel it like it's touching to the bottom border.
This is because the character formation of 'g', you will get same effect for 'q'.
Your CSS is perfect.

CSS HTML issue - Toolbar extends too far

This is the code I am working with:
http://jsfiddle.net/BTYA7/
I can't work out why the toolbar (blue) is extending past the right side of the text box. There doesnt seem to be any padding or margin a miss.
I applied it in blue and pink to help show it:
.uEditorToolbar {background-color: blue;}
Can anyone give some guidance please?
The uEditorToolbar has two extra pixels of padding. width:100% sets the width not including padding. If need the padding, you can remove the width:100%, and the blue bar doesn't extend too far.
Is that what you need, or am I missing something.
The default layout style as specified by the CSS standard means that the width and height properties are measured including only the content, but not the border, margin, or padding. So the combination of width:100% and padding: 0 0 0 2px; is pushing the content out by 2px.
The default display for <ul> is block so the width:100% is probably unnecessary anyway.
If you remove the width:100% or the padding-left will fix the problem.
Alternatively, the CSS3 box-sizing property can be used to correct the layout by using box-sizing: border-box; (if all browsers you are targeting support the property).
There appears to be a 2px padding. If I remove the padding then it looks ok.
.uEditor .uEditorToolbar
{
list-style: none;
width: 100%;
height: 48px;
margin: 0;
padding: 0 0 0 2px;
}
http://jsfiddle.net/BTYA7/5/
Remove width:100%; padding: 2px; from the .uEditor .uEditorToolbar CSS class. It will work.

How to fix a div on Mozilla - it's working correctly on Chrome

I have attached an image to my issue, what's happening is that Firefox gives my image an extra extension, where the entire thing works fine on Google Chrome, without the silly bottom image part. The image is set as part of a style, as a background image and the gray bit is defined with a table.
http://s8.postimage.org/rc26rtbr7/profile.png
Here's the style code...
div.frontpage_title {
padding: 5px;
font-weight: bold;
font-size: 12px;
background-image: url(../images/frontpage_tab.png);
color: #fff;
}
Thanks and regards.
Set the hight of the div.
If the image is 20px high do,
height:10px; /* 20px-5px-px (padding top and bottom) */
Stop the background repeating use:
background-repeat: no-repeat;
This will stop the image repeating, read more here
I would guess that your title div has no set height. This would mean that depending on how the browser renders the text, the height of the div would vary slightly. You could fix this by setting a height on your div:
div.frontpage_title {
height: 14px; // Set div height
line-height: 14px; // Optional, will vertically center text
padding: 5px;
font-weight: bold;
font-size: 12px;
background-image: url(../images/frontpage_tab.png);
color: #fff;
}
The "silly bottom image part" is your background repeating due to the extra height. Your total height needs to match the height of the tab image.
Another option would be to make your tab image taller, by say 10px. Then, if your tab is ever a little taller (<10px), you won't see the repeat. You could set background-repeat to none, but this will simply mean you will have a gap instead of the repeating image.

How to center align a pre tag in HTML

I'm trying to post some code on a blog using the pre tag. Something like this:
void function(){return 0;}
Now I want all this code to be center aligned. I'm not talking just about the text but also about the border around it. The width is set currently to 60%. So I want all of this to be center aligned. Is there a way to do it?
Add a custom CSS <div> Class that sets font to courier (10pt) and has left and right margins set in so that it's centered on the page.
.code {
font-family:courier;
font-size: 10pt;
margin: 5px; border: 1px solid black;
}
Then call it as follows:
<div class="code">Your Code Here</div>
The magic happens in the margin section. You can set all 4 attributes, but if you just set one, then it makes it a margin of that size all the way around.