Text Position & DIV Bottom Fixed Nav Bar

HTML & CSS
1

Hi,

On our site 1TM.com we have the text “ORDER NOW!” on our new CSS top navigation bar, we would like this text 1 pixel down. How do we do it?

Also we created a Fix CSS DIV social network bar at the bottom the page but it does not work in IE, is there a fix for this or is there a way to hide this DIV social network bar in IE?

Thanks!

2

Like this:


.menuButtonActive3 b{position:relative;top:1px}
3

It won’t work in IE because position:fixed isn’t supported in IE5 which is basically what you are forcing IE browsers to behave like as you don’t have a proper doctype as explained before.

You could use expressions or javascript to accomplish it but I wouldn’t recommend it.

I would just leave it a the bottom where it is as its causing no harm.

If you want to hide it then just use an IE conditional comment and set the element to display:none.

4

Thanks not sure but if I put the code at .menuButtonActive3 b{position:relative;top:1px} it shows up a different color and off center.

Thanks again Paul

5

position:relative;
top:1px

works but it move the whole CSS button down, I just need the text down 1 pixel

6

No it doesn’t the only change is that the text will be moved downwards by 1px. It will not move the red background at all. I tested locally and on your live example using firebug and it works fine.

You probably missed out the “b” selector.


.menuButtonActive3 b {position:relative;top:1px}
7

Am I doing this right?

div.menuBar a.menuButtonActive3 b {position:relative;top:1px},
div.menuBar a.menuButtonActive3:hover b {position:relative;top:1px} {
background-color: #FF0000;
border-color: #FF0000;
padding: 2px 6px 3px 6px;
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
cursor: pointer;
cursor: hand;
color: #FFFFFF;

Thanks!

8

No.

It should be this:



div.menuBar a.menuButtonActive3 b {position:relative;top:1px}

div.menuBar a.menuButtonActive3, 
div.menuBar a.menuButtonActive3:hover {
  background-color: #FF0000;
  border-color: #FF0000;
  color: #FFFFFF;
  cursor: pointer;
  font-family: Verdana,Arial,sans-serif;
  font-size: 8pt;
  font-style: normal;
  font-weight: normal;
  padding: 2px 6px 3px;
}

You’ve also made the hover the same as the existing style so nothing will change (although it may cancel out any cascading hover effect that may be in place) - is that what you wanted?

9

Shoot it was already in the right spot I looked at it wrong, sorry Paul

Thank you!

10

So for the IE Conditional Comments I just put the conditional comments around my bottom NAV Bar and it wont show in IE like:

<!–[if IE ]>
My Bottom NAV Bar Here
<![endif]–>

Thank you!

Sorry Paul

11

Hi,

No, just put the CCs in the head of the page and then make the element display:none with css.

e.g.


.....
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
[B]<!--[if IE ]>
<style type="text/css">
#SocialNav {display:none}
</style>
<![endif]-->[/B]
</head>
<body>
12

Wow that was easy put it in all the pages works great. CSS is getting simpler.

Thanks Paul!