CodingForums.com - WP CSS Problem w/ Desktop and iPad Safari

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - WP CSS Problem w/ Desktop and iPad Safari (http://www.codingforums.com/showthread.php?t=284977)

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?

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;

}

Quote:

Originally Posted by Excavator (Post 1302817)

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.

Quote:

Originally Posted by Psionicsin (Post 1302820)

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.

Quote:

Originally Posted by Excavator (Post 1302825)

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.

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.

Quote:

Originally Posted by Psionicsin (Post 1302924)

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?

Quote:

Originally Posted by Excavator (Post 1302937)

...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...?

Quote:

Originally Posted by Psionicsin (Post 1302939)

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.

Quote:

Originally Posted by Psionicsin (Post 1302939)

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.

Quote:

Originally Posted by Excavator (Post 1302949)

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?

Quote:

Originally Posted by Psionicsin (Post 1302955)

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>

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?

Quote:

Originally Posted by Psionicsin (Post 1302980)

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:

a valid DocType
an element with a width
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.

Quote:

Originally Posted by Excavator (Post 1302989)

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