CODEWITHSUNDEEP
htmlcross-browsercss
fmeer
fmeer

Reputation: 1

The spaces between these lines differs between browsers, and line-height doesn't seem to fix it

My heading ('header') and subheading ('subh') are displayed with different vertical spacing in different browsers. In Firefox it displays the way I want it to, but in Safari and Chrome, there's a massive gap.![Safari and Chrome example][1]

I've tried the line-height property, and it doesn't fix anything, and I've tried it with percentages, fractions and negatives (I have no idea if negatives do anything).

This is my CSS. I apologise if it's not stylistically correct, as I only started with HTML last month. Apparently my image won't show up either, so I hope I described it adequately.

header { background-color: white; float: left; font-family: "Arvo"; font-size: 300%; padding: 0 0 0 0; position: relative; top: 0; width: 100%; } subh { background-color: white; color: #33CC33; float: left; font-family: "Josefin Slab"; font-size:200%; padding: 0 0 0 0; position: relative; top: 7.5%; width: 100%; }

Upvotes: 0

Views: 55

Answers (2)

fmeer
fmeer

Reputation: 1

I've just realised what was wrong, and I'm somewhat ashamed. The combination of having position set to 'relative' and having the differing 'top' values caused the gaps. I still don't know why that displayed differently in different browsers, but it seems to be the case. I think I initially had them set to 'fixed'.

I have since set the top value for my heading and subheading to 0.

Upvotes: 0

Lunster
Lunster

Reputation: 906

I think different browsers may be handling your typo:

font-size: 300%%;

Differently. Remove the extra %.

Upvotes: 1

Related Questions