CODEWITHSUNDEEP
cssmarginpadding
Maurice Tempelsman
Maurice Tempelsman

Reputation: 953

CSS Text Alignment Issue

In Chrome and Safari, the following CSS problem occurs:

ul, li and a or link have a default CSS property that pushes everything vertically away. I have fiddled with the following properties:

font-size
margin-right
padding
color
text-decoration
margin
padding
border
display
list-style
vertical-align
line-height
line-height
font-style
margin
font-variant
padding-top
padding-bottom
margin-top
margin-bottom

And nothing seems to prevent the problem. I've downloaded the CSS reset by Yahoo, but I'm unsure how to use it properly. I haven't pursued that because I don't know that it would solve my problem anyway.

Upvotes: 0

Views: 98

Answers (2)

Jeff
Jeff

Reputation: 2861

I've looked at your Fiddle and I'm slightly confused. You say things are being pushed away vertically, but I don't see that happening at all.

The only thing I see which could even somewhat meet that description is the fact that your links are on separate lines.

If this is the problem, the solution very simple: divs are block-level elements. This means that they default to 100% width and are designed to break onto a new line before they start, and onto a new line after. This is the behavior of display: block; and is built-in to the default styles of a div.

To fix this, apply the following style:

#headernav div{ display: inline; }

This, however, is the least of your problems. The code you copied into the fiddle lacks a closing tag for one of the div elements, which could cause unpredictable behavior in older browsers. You have two divs with the same ID, which is a major no-no.

In this update to your fiddle I have fixed the HTML problems you have. Note that 'tempLink' is now a class, and is targetted by a '.' in CSS, not the '#' that indicates an ID.

I have applied the above CSS to the class tempLink, instead of any div within your headernav.

Note in that fiddle that your two links are now side-by-side. You can control the horizontal spacing between them with margin and padding (target the tempLink class).

Upvotes: 1

Eric Norcross
Eric Norcross

Reputation: 4306

As Adrift mentioned it would be a lot easier to diagnose if you use jsFiddle. That being said, have you tried display: inline-block or float: left?

Upvotes: 0

Related Questions