Problem with the display of gallery titles

[lenightowl]

Hi!
A friend brought to my attention this problem with my style sheets (adapted from Webdev).
On 2 of the browsers she uses, in the gallery titles at the top of the page, the type is falling below the confines of the strip between the two rules.
I only use IE6, so I have no way of making a visual check, could anyone help me out of this problem?
Is there a way to change the coding so as to make my titles look OK on the main browsers used?
Many anticipated thanks, I can do with all your help (I'm no HTML wizard ! LOL)
Marie H.
http://www.pbase.com/thenightowl

[canadiancraig]

Well, I don't think I can solve your problem right now, but I would suggest getting the Firebird browser from http://www.mozilla.org/products/firebird/ - it's free and is a decent browser. That way you would be able to see what your friend is seeing.

Also, where you have "a.td.thumbnail:hover" (or anything with this kind of syntax) you should change it to "td.thumbnail a:hover" so that browsers other than IE can use the style.

That's my suggestion anyhow.

[srijith]

You could try to replace this part of the CSS code:

Code: Select all

h1, h2 {
        border: #FFFFFF 1px solid;
        border-left: 1px none;
        border-right: 1px none;
        border-top: #FFFFFF 1px solid;
        margin-bottom: 1em;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 10px;
        width: 100%;
        display: block;
        background: #362A5A;
        color: #FFFFFF;
        font-size: 25px;
        font-weight: bold;
        letter-spacing: 4px;
        text-align: center;
        height: 55px;
        position: relative;
        }


There still is some problem, cos Opera and Firebird seems to assign a lot of space between the top of the word and the top margin than IE, but the values given above renders it better than what it looks like as of now

[lenightowl]

Well, I don't think I can solve your problem right now, but I would suggest getting the Firebird browser from http://www.mozilla.org/products/firebird/ - it's free and is a decent browser. That way you would be able to see what your friend is seeing.

Also, where you have "a.td.thumbnail:hover" (or anything with this kind of syntax) you should change it to "td.thumbnail a:hover" so that browsers other than IE can use the style.

That's my suggestion anyhow.

Thanks a lot for the suggestion! I will give it a try!
Marie H.

[lenightowl]

You could try to replace this part of the CSS code:

Code: Select all

h1, h2 {
        border: #FFFFFF 1px solid;
        border-left: 1px none;
        border-right: 1px none;
        border-top: #FFFFFF 1px solid;
        margin-bottom: 1em;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 10px;
        width: 100%;
        display: block;
        background: #362A5A;
        color: #FFFFFF;
        font-size: 25px;
        font-weight: bold;
        letter-spacing: 4px;
        text-align: center;
        height: 55px;
        position: relative;
        }


There still is some problem, cos Opera and Firebird seems to assign a lot of space between the top of the word and the top margin than IE, but the values given above renders it better than what it looks like as of now

Many thanks for the helpful coding, I'm going to try it now!
Marie H.

[lenightowl]

Hi again canadiancraig!
I tried to have a look at your suggestion, but it seems to affect only the thumbnails, not the gallery titles?
Unless I also have a problem with the TN display in other browsers, but my friend has only mentioned the gallery titles.
Marie H.

[lenightowl]

Hi again srijith!
I tried your coding suggestion [height: 55px; instead of 25]
But although I have no means of checking how it looks in another browser, now it doesn't look right in IE6 (far too much room in the bottom)
Maybe I can try to reduce the font size?
I will try this now, if you could let me know how it looks in a different browser, I really would appreciate!
Thanks in advance!
Marie H.

[alangrant]

The problem with the gallery title seems to be something to do with the interaction between the basic font size, the first-letter font size, the fixed height of the h2 heading, and the padding of 5px on the h2 heading. It appears that different browsers use these in different way to calculate the height of the heading. I wasn't able to figure this out more exactly, but I think the solution lies in changing one or more of these.

I think there are two approaches that could work
- Don't set the font size on h2:first-letter (of course this means that you will lose the visual effect of having a large first letter)
- Remove "height: 25px; " from h2, and experiment with the padding size to get the size you want. I think this is the better solution, but maybe there was a good reason to have the height in the CSS in the first place.

The issue CanadianCraig raised is a different one, as you said it affects the thumbnails and not the gallery title. I have looked at your page in IE6 and Mozilla and the thumbnails look different in several ways - for example Mozilla doesn't show the outer borders. However if someone hadn't seen the page in IE6 they wouldn't know anything is missing, so it is less of a problem.

Hope this helps.

[mattywalsh]

hey guys - i'm having a similar problem - see this thread:
http://forum.pbase.com/viewtopic.php?t=2583

[srijith]

Hi again srijith!
I tried your coding suggestion [height: 55px; instead of 25]
But although I have no means of checking how it looks in another browser, now it doesn't look right in IE6 (far too much room in the bottom)
Maybe I can try to reduce the font size?
I will try this now, if you could let me know how it looks in a different browser, I really would appreciate!
Thanks in advance!
Marie H.

The setting I sugegsted does look better on non-IE browsers than IE. In IE the problem you mention here does crop up. If you are too keen on getting it right on all browsers you will have to code up some CSS hacks to distinguish between IE and non-IE browsers. Check out this site - http://css-discuss.incutio.com/ Look for the links under the section - "Hacks - hacks and work-arounds to make CSS work"

[canadiancraig]

Solution

Ok, the solution is very simple. You were specifying a specific height and while that looked fine in IE, other browsers handled placing the text differently. All you have to do is get rid of the height: 25px; line in the h1, h2 { ... } block and it should look fine in all browsers.

P.S. Sorry about the other bit to do with the links. I hadn't realised it would cause difficulties as it's fine with less complex styles that I've worked with in the past.

[lenightowl]

Solution

Ok, the solution is very simple. You were specifying a specific height and while that looked fine in IE, other browsers handled placing the text differently. All you have to do is get rid of the height: 25px; line in the h1, h2 { ... } block and it should look fine in all browsers.

P.S. Sorry about the other bit to do with the links. I hadn't realised it would cause difficulties as it's fine with less complex styles that I've worked with in the past.

Hi canadiancraig!
I just tried it... I removed the "height: 25px" line in the h1, h2
... of course to me it still looks the same in IE6, which is fine!
Could you tell me if this did the trick?
I'll cross my fingers waiting for your reply!
Thanks for the help!
Marie H.
http://www.pbase.com/thenightowl

[lenightowl]

Many thanks to

- srijith :

I bookmarked the site you referred me to, although I fear it might be a little too technical for my limited understanding of HTML!

and to

- alangrant :

I did experiment a bit with the padding size, and it always looks OK to me in IE6.
The problem is as long as I was not conscious of a display issue in other browsers I was fine, but now I realise that making the style sheets look good everywhere is a bit of a headache and well above my HTML abilities!

Thanks again for your help!
Marie H.

[canadiancraig]

Yep, I just had a look at it in both Firebird and Opera and the heading looks perfect.

[lenightowl]

Yep, I just had a look at it in both Firebird and Opera and the heading looks perfect.

You're the best!

THANK YOU!

Marie H.