Tab for My Nav

HTML & CSS
1

Hey Guys,

So just launched this site…

http://www.lowerys.com/scribbles/

Was wondering I have a sidenav that slides out but can’t tell its a nav. I would like to have a Menu title table hanging out a bit so people know to rollover and text to bevertical on it, would like it up at the top where the first grey box is, whats best way I can accomplish this. How can it be done with current sidenav.

Thanks,

Mike

2

As a rough start you could do something like this:


.navbar li.icon{position:relative}

.navbar li.icon:after{
content:"M E N U ";
display:block;
width:15px;
height:60px;
background:red;
border:1px solid #000;
position:absolute;
top:0;
right:-16px;
padding:10px 0 10px;
}
3

Thanks, definetly a start, is there any way to rotate the text instead of having it stacked? I hope you know what I mean and also to have the tab that sticks out the whole height of the top grey square, which changes when browser is rezied.

Thanks

4

Hi,

You can find out how to rotate text from the links below.

http://snook.ca/archives/html_and_css/css-text-rotation

It can be tricky to get right as you have to do strange things for old IE versions.

You can match the height of the element by using top and bottom instead of height.

e.g.


.navbar li.icon{position:relative}

.navbar li.icon:after{
content:"M E N U ";
display:block;
width:15px;
[B]height:auto;[/B]
background:red;
border:1px solid #000;
position:absolute;
[B]top:0;
bottom:0px;[/B]
right:-16px;
padding:10px 0 10px;
}

However, I’m not sure how that is going to pan out with the text rotation. You may have to use a real element instead of a pseudo element and then use an inner element to transform the text.

Have a play around and see what happens :slight_smile:

5

Thanks :),

Apparently the site doesnt work well in IE8, how can I resolve this issue, I’m not sure what is wrong with it as I dont have IE8.

Thanks,

Mike

6

You can resolve it by not using properties that IE8 doesn’t understand. If you are going to use the latest css3 properties then you either have to forget about older browsers like IE8 or supply a fallback. You are using things like background-size:cover which ie8 doesn’t understand and therefore won’t shrink or enlarge images as required. You should supply smaller fixed sized images to ie8 via conditional comments or a suitable fallback method.

There is no quick solution as its something you need to build in from the ground up but when I looked at the page in IE8 it mainly seemed to be the menu images down the side of the page that were messed up for the reasons I mentioned above. You should create a fixed width and height version for IE8 with suitable images.

I’m not sure what is wrong with it as I dont have IE8.

Thanks,

Mike

Hi,

If you have IE9 (or 10) on windows you can use the f12 developer tools and select ie8 mode for testing. It’s not very accurate but gives you a rough idea. I use ietester for a more exact rendering but ietester is pretty unstable but crashes quite often but you can start it up again without much harm.

If you have a Mac system then you can purchase “parallels” and run windows on it for testing.

7

Mike, it sounds like you are not here for guidance, you want an IE8 plug-n-play resolution.

Here’s a different approach instead: Use a background-image that displays “MENU” the way you want it and put it in the container that Paul gave you instead of trying to make cutting edge CSS3 properties that IE8 does not recognize work with IE8. Can you work with the background-mage approach?

Some thoughts…

As a web site designer, if you must support IE8 compatibility, take responsiblility for equipping yourself to achieve it:

Install Windows XP Pro on another PC or another hard drive. It will install IE8. If you require IE8 compatibility, a PC running IE8 must be a primary resource, not an afterthought. The site should be tested frequently in IE8 as it is being developed.

Alternatively, you can test your code using any of several browser testing services on the internet… some are free.

Become very familiar with third party IE8 fixes… shivs and the like.

Do not expect cutting edge CSS3 code to work in IE8. Some doesn’t work in IE9, either. Be prepared to accept compromises and advise your clients accordingly.