8 replies [Last post]
riddermark
riddermark's picture
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2007-09-15
Posts: 5
Points: 0

Hey everybody,
I've been beating my head with this for half an hour now

Baiscly I have a div box 700x20px .. And i want a couple of links to be inside it and aligned in the middle of the div (Vertically).

However what works in opera doesnt work in FF and IE (all latest versions). And vice versa. If it works in IE it doesnt work in Opera. I included a picture below. You can see that in IE it's fine, in FF its 1 pixel below and in opera the damn text is on the top border :/

here's a screenie
http://i9.tinypic.com/66l6n86.jpg

I have also put the html online here: (the CSS is embedded inside)
http://fotoz.hit.bg/new-transitional.html

View Source and you can view the whole css, i still havent moved it to seperate file, cuz im not finished with the design itself.

Thanks in advance!

p.p
css and xhtml validated

d41
d41's picture
Offline
Enthusiast
Last seen: 11 years 49 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

I usually vertically align

I usually vertically align things by doing "line-height: 20px;" or whatever the height of the object is. "margin: auto 0;" might also work.

a.lit {
padding-left: 17px;
text-decoration: none;
line-height: 20px;
font-size: 0.6em;
font-family: verdana;
}

PS.You don't need to use a class for all those <a>'s, you can just use the decedent selector. (div.litmen a{:;} instead of a.lit)

riddermark
riddermark's picture
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2007-09-15
Posts: 5
Points: 0

Thanks for the reply man! I

:thumbsup: Thanks for the reply man! I will take these things into consideration. A friend showed me a way to do it a few minutes ago. Basicly I had to vertical-align: top; the text (links) inside the div, and then give padding-top to the div itself. It worked for all the browsers.

But being the noob I am can I ask in more detail what you meant by your PS. sentence? about the s? Smile Not really comfortable with terms yet :? unless I see an example!

Thanks again! Wink

d41
d41's picture
Offline
Enthusiast
Last seen: 11 years 49 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Well, inside <div

Well, inside <div class="litmen"> you have a bunch of <a>'s. Each of these <a>'s has a class, "lit". <a class="lit">. You don't need to bother with a class, you can just use the descendant selector. Instead of putting a.lit{}, you would do div.litmen a{} which means that all <a>'s that are nested inside of a div with the class litmen get the rules inside the {}

riddermark
riddermark's picture
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2007-09-15
Posts: 5
Points: 0

I see

nevermind that post, i got it figured out. I have another question though. Since on another forum i was told that I shouldnt put direct content in the

, for example all the links here should be in a
    element.

But of course that screws the layout again, so should I stick to the ul or just dont use it at all?

d41
d41's picture
Offline
Enthusiast
Last seen: 11 years 49 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Hmmm... I don't really know

Hmmm... I don't really know whether you should use a <ul> or not, so don't ask me. But if you want to use a <ul>, you might be able do it if you do "div.litmen ul li { display: inline; }" or something like that. There might be a few other rules you need to put in. I remember using "display:inline" to make horizontal navigation bars, so try that.

riddermark
riddermark's picture
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2007-09-15
Posts: 5
Points: 0

damnation

I tried with ul and li even, you can view the updated source code in the html link i posted in the first post. It does work but then again the vertical align problem occurs :curse:

I can't believe such a simple issue wouldn't have a simple solution. I must be messing something pretty bad :shrug:

Thanks for following! Wink

d41
d41's picture
Offline
Enthusiast
Last seen: 11 years 49 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Just add "line-height:

Just add "line-height: 20px;" to the <li> rules (#menu li {}).

riddermark
riddermark's picture
Offline
newbie
Last seen: 14 years 41 weeks ago
Joined: 2007-09-15
Posts: 5
Points: 0

Doesn't really solve it. It

Doesn't really solve it. It puts it somewhat centered in Opera and IE but on FF it's on the bottom border Sick