...

View Full Version : IE Layout/Scrollbar Issues (partly Fancybox)



Erve
10-30-2011, 07:06 PM
I'm having a couple of issues with my site that I've redesigned. The nav layout is 100% in Safari and Firefox, but the "home" and "blog" links at either end of the nav bar appear a few px lower in IE. The other links are actually buttons and I've added position adjustments in the CSS to account for that. But IE is rendering the positions incorrectly and I'm not sure why.....?

I'm also getting unnecessary scrollbars in IE in the Fancybox windows... Click "writing" or "web design" to see what I mean. Any idea how I can get rid of them??

The website is www.grvhi.com

Thanks very much!!

(Would also appreciate any comments re the site's usability etc!)

Excavator
10-30-2011, 07:32 PM
Hello Erve,
Some scrollbars in FF8 when I look at Web Design. Comes from this bit in red -

#webdesigncontent {
text-transform:none;
text-align:justify;
font-size:14px;
overflow: scroll;
color:#000;
width:600px;
height:auto;
padding:10px;
}

That could be changed to overflow: auto; ?


The same thing with the Writing too, see:

#writingcontent {
text-transform:none;
text-align:justify;
font-size:14px;
overflow: scroll;
color:#000;
width:600px;
height:auto;
padding:10px;
}

Erve
10-30-2011, 07:39 PM
Hello Erve,
Some scrollbars in FF8 when I look at Web Design. Comes from this bit in red -

#webdesigncontent {
text-transform:none;
text-align:justify;
font-size:14px;
overflow: scroll;
color:#000;
width:600px;
height:auto;
padding:10px;
}

That could be changed to overflow: auto; ?


The same thing with the Writing too, see:

#writingcontent {
text-transform:none;
text-align:justify;
font-size:14px;
overflow: scroll;
color:#000;
width:600px;
height:auto;
padding:10px;
}

Thanks Excavator!!

Any thoughts on the "home" and "blog" issue??

(I edited my reply when I re-read your post properly!)

Excavator
10-30-2011, 07:42 PM
For your menu, try removing the top padding you have on your buttons...


button {
/*padding-top:3px;*/
text-transform:uppercase;
font-size:16px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}
.button {
/*padding-top:5px;*/
text-transform:uppercase;
font-size:16px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}

Erve
10-30-2011, 07:59 PM
The trouble there is that I then get the reverse effect - the "home" and "blog" links are now above the rest... And the problem is not equal between IE and Safari/FF.... I can't work out why....

Excavator
10-30-2011, 08:13 PM
The trouble there is that I then get the reverse effect - the "home" and "blog" links are now above the rest... And the problem is not equal between IE and Safari/FF.... I can't work out why....

I'm viewing your site in FF8 and IE9. Zeroing out that padding worked on this end, not sure what earlier versions of those browsers will look like...or why a button renders different than your .button.

Have you tried making all the links with images and doing away with the div element that's causing you problems?

.../edit
I see the menu items are not images. Oops.

Erve
10-30-2011, 08:17 PM
I'm viewing your site in FF8 and IE9. Zeroing out that padding worked on this end, not sure what earlier versions of those browsers will look like...or why a button renders different than your .button.

Have you tried making all the links with images and doing away with the div element that's causing you problems?

I'm getting "blog" and "home" a couple of px above the others in IE9 and about 10px above in Safari.... So not sure what's going on!

Excavator
10-30-2011, 08:23 PM
Another approach to make them more similar...
Combine button and .button and add a line-height, like this -

/*button {
padding-top:3px;
text-transform:uppercase;
font-size:16px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}

.button {
padding-top:5px;
text-transform:uppercase;
font-size:16px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}*/
button, .button {
text-transform:uppercase;
font-size:16px;
line-height: 27px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}

Erve
10-30-2011, 08:29 PM
Another approach to make them more similar...
Combine button and .button and add a line-height, like this -

/*button {
padding-top:3px;
text-transform:uppercase;
font-size:16px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}

.button {
padding-top:5px;
text-transform:uppercase;
font-size:16px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}*/
button, .button {
text-transform:uppercase;
font-size:16px;
line-height: 27px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}

Thanks Excavator, but it's still not working... Particularly in Safari... I tried increasing the line-height as well...

Excavator
10-30-2011, 08:48 PM
Hmm, maybe instead of trying to style .button we should be looking at the anchor instead.
Like this?

button, .button a {
text-transform:uppercase;
font-size:16px;
line-height: 37px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}
.button a {display: block;}

Erve
10-30-2011, 08:53 PM
Hmm, maybe instead of trying to style .button we should be looking at the anchor instead.
Like this?

button, .button a {
text-transform:uppercase;
font-size:16px;
line-height: 37px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
background-color:transparent;
border:none;
cursor:pointer;
color: #FFF;
letter-spacing:.2em;
}
.button a {display: block;}


Nope, no luck there either! Perhaps the best thing to do would be to remove the buttons altogether and use <a href="#".... instead. That way, they'll all be the same. It may not be best practice, but it works!

Excavator
10-30-2011, 09:08 PM
Nope, no luck there either! Perhaps the best thing to do would be to remove the buttons altogether and use <a href="#".... instead. That way, they'll all be the same.

I agree :thumbsup:

Erve
10-31-2011, 04:23 AM
I agree :thumbsup:

Thanks for your help Excavator!

Excavator
10-31-2011, 05:10 AM
I like that jquery thumbnail slider at the top of your page.

I did have to visit your site 4 or 5 times before I saw the little box that told me I could shuffle images with arrows on my keyboard...
It works perfectly in FF8 and IE9 though. Very cool :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum