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 15 of 15
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts

    WP CSS Problem w/ Desktop and iPad Safari

    I'm currently using the Genesis Framework for WordPress for the construction of a CONCEPT SITE. Everything looks to be fine, except for some weird things Safari seems to be doing on both the desktop and iPad versions.

    1.) On the desktop version, if you hover over "Chromatics" in the nav menu a drop-down menu appears.

    Code:
    .sub-menu a {
    	min-height: auto;
    	padding: 7px 0px 6px;
    }
    ...has that value, and it looks correct on Chrome and FF. Safari still seems to be pulling the min-height value fromt the parent, and rendering it as...

    Code:
    .sub-menu a {
    	min-height: 55px;
    }
    What is going on here? I've tried clearing the cache and everything.

    2.) On the iPad I seem to be having a weird zooming problem. I'm not sure where it came from, but it's almost as if the iPad starts zoomed in at a 1:1 ratio instead of giving me a 100% zoomed out fit to frame view like it normally does with other sites. I've found SOME workarounds, but they're hard to apply because of the framework I'm utilizing.

    Another problem I seem to be having on the iPad is the menu in the footer. I have it enough of a width in order to display all on one line. This seems to not be the case though as in either position the iPad renders it like it didn't receive enough space and has to move down.

    What did I do wrong here?
    Last edited by Psionicsin; 12-28-2012 at 11:50 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Psionicsin,
    I'm not sure what min-height: auto; will do for you as that is invalid. See min-height property here.

    I don't have Safari to see what your issue is. Seems to look fine in FF18.

    Maybe you should specify what min-height or line-height instead of leaving it up to the browser?

    You may also need to be more specific with this bit of CSS as well -
    Code:
    .menu-primary a, #header .menu a {
        border-right: medium none;
        color: #FFFFFF;
        display: block;
        min-height: 55px;
        position: relative;
        text-decoration: none;
        width: 135px;
    }
    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:

    Psionicsin (12-29-2012)

  • #3
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Psionicsin,
    I'm not sure what min-height: auto; will do for you as that is invalid.
    I'm not sure how it's invalid as it seems to be doing something. Without it in place, my down-down items have a height of around 55px. With it, it re-constrains to height to around the total height of the content filling it. At least on my comp.

    I have this coding for the primary navigations anchor links:

    Code:
    .menu-primary a,
    #header .menu a {
    	width: 135px;
    	min-height: 55px;
    	color: #fff;
    	display: block;
    	position: relative;
    	text-decoration: none;
    }
    
    .menu-secondary a 
    	border-right: none;
    	color: #fff;
    	display: block;
    	padding: 7px 15px 6px;
    	position: relative;
    	text-decoration: none;
    }
    And here's the coding for the drop-down anchors:

    Code:
    .sub-menu a {
    	min-height: auto;
    	padding: 7px 0px 6px;
    }
    In both Chrome and FF when auto is set for the min-height value of .sub-menu a, the height of the drop-down anchors changes from chunky to more streamlined. But oddly this is not the case in Safari. I can post pics if you'd like.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Psionicsin View Post
    I'm not sure how it's invalid as it seems to be doing something.
    That site I linked you to does not list auto as a valid property value. I have no standard expectation as to how that may be treated in any browser.
    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:

    Psionicsin (12-29-2012)

  • #5
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    That site I linked you to does not list auto as a valid property value. I have no standard expectation as to how that may be treated in any browser.
    Ahh I see what you mean.

    Is there an alternate way to accomplish what I'm try to achieve? Maybe changing the getting rid of min-height, but still being able to retain the position of the sub-menu to line up with the bottom of the menu?

    For some reason I'm having a difficult time wrapping my head around their css usage.

  • #6
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Here's a PasteBin of the edits I've made thus far:

    My PasteBin File

    Please let me know if something is erroneous or whatever.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Psionicsin View Post
    Ahh I see what you mean.

    Is there an alternate way to accomplish what I'm try to achieve? Maybe changing the getting rid of min-height, but still being able to retain the position of the sub-menu to line up with the bottom of the menu?

    For some reason I'm having a difficult time wrapping my head around their css usage.
    Maybe you should specify what that min-height should be instead of leaving it up to the browser? Have you tried using line-height therre instead?
    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:

    Psionicsin (12-29-2012)

  • #8
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    ...Have you tried using line-height therre instead?
    Yes. When I did line-height the single line anchors worked ok, yet the ones I forced to be on two lines (by using a br in between) were affected as well and...didn't look so pretty lol.

    Also I'm not even sure why I started using min-height to begin with. Well the min-height with an attached pixel value did work, but I didn't want the value transfered down to the children. And although I COULD specify a pixel value for the children...I can't guarantee that it'll hold based upon what text length is inside of the child areas.

    Or maybe I'm over thinking this...?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Psionicsin View Post
    Yes. When I did line-height the single line anchors worked ok, yet the ones I forced to be on two lines (by using a br in between) were affected as well and...didn't look so pretty lol.
    Line-height centers a single line of text vertically very well. I won't work on your anchors that have a line break though.
    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:

    Psionicsin (12-29-2012)

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Psionicsin View Post

    Or maybe I'm over thinking this...?


    I think you are making it pretty complicated. I'll work up a little demo that might show you how easy it can be ... I'm off to town right now though.
    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:

    Psionicsin (12-29-2012)

  • #11
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Line-height centers a single line of text vertically very well. I won't work on your anchors that have a line break though.
    Ok so I re-worked the menu titles by giving the ones with more than one word an " ". After that I shrunk the font size down a bit, made them bold and THEN used "line-height" for centering.

    So far I'm liking it...did I do anything wrong?
    Last edited by Psionicsin; 12-29-2012 at 09:47 PM.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Psionicsin View Post

    So far I'm liking it...did I do anything wrong?
    That's looking much better but it's still more complicated than it needs to be. I'm sure most of that comes from the template your using (hate wordpress and didn't look at that genesis framework you link to).

    It looks like you use both visibility: hidden/visible and position the dropped ul off/on the page to hide or display your ul. You don't need both. Currently, all my examples use visibility: hidden/visible; or display: none/block; to control the dropped menu. I am moving over to positioning off the page as page readers won't see the dropped menu if it's hidden (it's a handicapped access thing).

    Look at your menu like this (minus the js transition you put on the most recent version). Maybe this can be adapted to your genesis framework, maybe not. It seems much less complex...
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>demo</title>
    <style type="text/css">
    html, body {
    	color: #333;
    	margin: 0;
    	padding: 0;
    	text-decoration: none;
    	font: 300 100%/1.5625 "Helvetica Neue", Arial, Helvetica, sans-serif;
    }
    #wrap {
    	width: 1000px;
    	margin: 15px auto;
    	-moz-box-shadow: 0 0 5px #999;
    	-webkit-box-shadow: 0 0 5px #999;
    	box-shadow: 0 0 5px #999;
    	background: #fff;
    }
    #header {
    	height: 130px;
    	background: url(images/bg-header.png) no-repeat top;
    }
    	h1#title {
    		line-height: 75px;
    		margin: 0;
    		text-align: center;
    		font-size: 2em;
    	}
    ul#nav,
    ul.dropped {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    ul#nav {
    	height: 55px;
    	background: url(images/bg-menu.png) repeat-y;
    }
    	ul#nav li {
    		width: 135px;
    		padding: 0 9px 0 0;
    		float: left;
    		position: relative;
    		text-align: center;
    	}
    	ul#nav li.single {line-height: 55px;}
    	ul#nav li:last-child {padding: 0;}
    		ul#nav li a {
    			height: 55px;
    			width: 135px;
    			display: block;
    		}
    	ul.dropped {
    		width: 135px;
    		position: absolute;
    		top: 55px;
    		left: -999px;
    		z-index: 1;
    	}
    	ul#nav li:hover ul.dropped {
    		left: 0;
    		background: url(images/bg-menu.png) repeat-y;
    	}
    		ul#dropped li {
    			line-height: 55px;
    			width: 135px;
    			padding: 0;
    		}
    #inner {
    	height: 400px;
    	padding: 0 20px;
    	overflow: auto;
    	background: #fc6;
    }
    a:link, a:visited {
      text-decoration: none;
      color: #fff;
    }
    a:hover, a:active {color: #f00;}
    </style>
    </head>
    <body>
        <div id="wrap">
                <div id="header">
                    <h1 id="title"><a href="#">Title</a></h1>
                        <ul id="nav">
                            <li><a href="#">Company<br/>Introduction</a></li>
                            <li><a href="#">Product<br/>Introduction</a></li>
                            <li class="single"><a href="#">Chromatics</a>
                                <ul class="dropped">
                                    <li><a href="#">Test 1</a></li>
                                    <li><a href="#">Test 2</a></li>
                                    <li><a href="#">Test 3</a></li>
                                </ul>
                            </li>
                            <li class="single"><a href="#">Gallery</a></li>
                            <li class="single"><a href="#">Video</a></li>
                            <li class="single"><a href="#">References</a></li>
                            <li><a href="#">Customer<br/>Center</a></li>
                        </ul>
                <!--end header--></div>
            <div id="inner">
                <p>
                	Just some stuff to show the menu drops on top of content - <br />
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                    sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                    duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
            <!--end inner--></div>
        <!--end wrap--></div>
    </body>
    </html>
    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:

    Psionicsin (12-30-2012)

  • #13
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    I see what you're doing.

    However the things you mentioned are apart of the Genesis framework. There are 2-3 menus that come registered by default. It might be for those as well? And this is also the first time I'm working with it, so I'm trying to mess with as few things as possible for fear of breakage lol.

    They have their default theme (which one buys), and then a suggested child-theme template to build off of. I'm building off of their suggested CTT just to get the hang of this non-sense. Probably WON'T be using it in the future though lol.

    But I do have one last question...my footer menu doesn't seem to be centering the way I need it to. I'm pretty sure there's some block of code in their BS that's obfuscating what I'm trying to do. Any help with that?

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Psionicsin View Post

    But I do have one last question...my footer menu doesn't seem to be centering the way I need it to. I'm pretty sure there's some block of code in their BS that's obfuscating what I'm trying to do. Any help with that?
    Validating might help with that. Normally to center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto

    In your code though, it looks like the element to be centered - .menu-menu-footer-container #menu-menu-footer - is wrapped in paragraph tags.
    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:

    Psionicsin (12-30-2012)

  • #15
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    349
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    In your code though, it looks like the element to be centered - .menu-menu-footer-container #menu-menu-footer - is wrapped in paragraph tags.
    Ok I think I've solved everything finally.

    Thanks a lot for your help @Excavator


  •  

    Posting Permissions

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