Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    IE Layout/Scrollbar Issues (partly Fancybox)

    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!)

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Erve,
    Some scrollbars in FF8 when I look at Web Design. Comes from this bit in red -
    Code:
    #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:
    Code:
    #writingcontent {
    	text-transform:none;
    	text-align:justify;
    	font-size:14px;
    	overflow: scroll;
    	color:#000;
    	width:600px;
    	height:auto;
    	padding:10px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Erve (10-30-2011)

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Erve,
    Some scrollbars in FF8 when I look at Web Design. Comes from this bit in red -
    Code:
    #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:
    Code:
    #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!)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    For your menu, try removing the top padding you have on your buttons...
    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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....

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Erve View Post
    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.
    Last edited by Excavator; 10-30-2011 at 08:15 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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!

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Another approach to make them more similar...
    Combine button and .button and add a line-height, like this -
    Code:
    /*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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Another approach to make them more similar...
    Combine button and .button and add a line-height, like this -
    Code:
    /*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...
    Last edited by Erve; 10-30-2011 at 08:31 PM.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hmm, maybe instead of trying to style .button we should be looking at the anchor instead.
    Like this?
    Code:
    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;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hmm, maybe instead of trying to style .button we should be looking at the anchor instead.
    Like this?
    Code:
    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!

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Erve View Post
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Oct 2011
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I agree
    Thanks for your help Excavator!

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •