Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2006-08-04 17:11:51
- alexandra
- Member
- From: Cologne, Germany
- Registered: 2004-04-02
- Posts: 1,370
vertical nav bar issue on Safari/MAC
HI, i have a big problem with the top nav bar on TXP Mag only in Safari and FF on Mac. As i do not have a MAC i can not check what i do. Colak was so kind to help me a little but he is very busy and mailing back and forth for checking is exhausting. Can some CSS wiz with Mac please help to solve the following issue:
The link items in the top nav bar are floated and i like to have the last link (About) to sit on the right site. I tryed to give it a margin-left to push it to the right but in Safari/FF only on Mac the about ink disappears/shifts under the other links. See here: http://txpmag.com/article.
Offline
Re: vertical nav bar issue on Safari/MAC
What about <code>li.aboutNavi {float: right;}</code>?
Offline
#3 2006-08-04 18:35:06
- marios
- Archived Plugin Author
- Registered: 2005-03-12
- Posts: 1,253
Re: vertical nav bar issue on Safari/MAC
Hi, alexandra
Font prefs in different UA’s and Screen resolutions. One of the most difficult aspects of CSS based Layouts.
I have FF and Safari on MAc and it did display perfectly fine in both cases for me.
Except if I increase my font-Size a couple of notches
(Some one else might have set his font prefs to something more exotic and the Layout looks different)
A quick fix, but not that elegant:
<code>
.mainNavi li {float:left;}
li.aboutNavi {float:none;position:absolute;right:0;top:10px;}</code>
The layout for the top boxes is absolute positioned, so the only thing I could think of was the above.
regards, marios
Last edited by marios (2006-08-04 18:37:36)
⌃ ⇧ < ⎋ ⌃ ⇧ >
Offline
#4 2006-08-04 18:38:59
- alexandra
- Member
- From: Cologne, Germany
- Registered: 2004-04-02
- Posts: 1,370
Re: vertical nav bar issue on Safari/MAC
Walker schrieb:
What about <code>li.aboutNavi {float: right;}</code>?
Would you mind testing this in FF on your MAC ?
(cuz i remember having tested this before and it did not work)
Offline
Re: vertical nav bar issue on Safari/MAC
just out of interest, how do you live edit css with safari? or on the mac in general?
I know about xyle scope and the webkit css inspector but don’t see anywhere in those where you can actually live edit css, only view it.
TXP Builders – finely-crafted code, design and txp
Offline
Re: vertical nav bar issue on Safari/MAC
Looking good here on FF MAC 1.5.0.6.
Offline
#7 2006-08-04 19:04:38
- alexandra
- Member
- From: Cologne, Germany
- Registered: 2004-04-02
- Posts: 1,370
Re: vertical nav bar issue on Safari/MAC
okay, thanks marios :) it works in FF, Opera and IE on WIN.
though now i noticed another issue: in FF/Opera while hovering over the links a 28px height dark-red box shows, this is not the case in IE/Win. I probably should post a screenshot.
That all drives me nuts…arghhh
@jacob you can use the FF developer toolbar for live testing, even on a MAC (someone can post the link to the dev toolbar i guess)
Last edited by alexandra (2006-08-04 19:06:13)
Offline
Re: vertical nav bar issue on Safari/MAC
try <code>background: transparent;</code> on the nav links, specifically on the <code>:hover</code> state.
It looks like you are getting the following rules on the hovered nav items. Not sure which you are intending.
<code>
a:hover (line 42)
{
color: rgb(215, 75, 0);
text-decoration: underline;
}
.mainNavi a:link (line 68)
{
color: rgb(255, 255, 255);
}
.mainNavi a:hover (line 70)
{
color: rgb(255, 255, 255);
background-color: rgb(195, 83, 75);
}
</code>
from this markup:
<code>
<div class=“mainNavi”>
<ul>
<li><h2><a href=“http://txpmag.com”>Start</a></h2></li>
<li class=“arti”><h2><a href=”/article/”>Articles</a></h2></li>
<li class=“interv”><h2><a href=”/interviews”>Interviews</a></h2></li>
<li class=“contri”><h2><a href=”/contribution”>Contribute</a></h2></li>
<li class=“archi”><h2><a href=”/archiv”>Archive</a></h2></li>
<li class=“abou aboutNavi”><h2><a href=”/about”>About</a></h2></li>
</ul>
</div>
</code>
You could probably drop the h2, and just style as <code>.mainnavi ul li a</code> and <code>.mainnavi ul li a:hover</code>. Just a thought…
Last edited by Jeff_K (2006-08-04 19:27:23)
Offline
#9 2006-08-04 19:23:47
- marios
- Archived Plugin Author
- Registered: 2005-03-12
- Posts: 1,253
Re: vertical nav bar issue on Safari/MAC
jakob wrote:
just out of interest, how do you live edit css with safari? or on the mac in general?
I know about xyle scope and the webkit css inspector but don’t see anywhere in those where you can actually live edit css, only view it.
I also use the web <a href=“http://chrispederick.com/work/webdeveloper/”>developer extension</a> on FF for live editing.I never managed to get web tool kit working for Safari though.
It allows live CSS editing as well.
alexandra wrote:
in FF/Opera while hovering over the links a 28px height dark-red box shows, this is not the case in IE/Win. I probably should post a screenshot.
That all drives me nuts…arghhh
On Mac ok for hover.( Is the dark color for hover not intended ?)
A screenshot would be helpful , to understand the Issue.
regards, marios
Last edited by marios (2006-08-04 19:32:13)
⌃ ⇧ < ⎋ ⌃ ⇧ >
Offline
#10 2006-08-04 19:39:51
- alexandra
- Member
- From: Cologne, Germany
- Registered: 2004-04-02
- Posts: 1,370
Re: vertical nav bar issue on Safari/MAC
@Jeff
just from reading i do not get the intention… why set background to transparent? ..mhh.. it´s 9.30 pm here and i should stop .. i am a nut by now ;)
@marios: everything is fine with the vertical align of the nav bar thanks to your advice. all what is left is a Win issue when hovering over the nav items. i better post a screenshot, you are right. tomorrow.
thanks guys for now, you are awesome as ever!
Last edited by alexandra (2006-08-04 19:42:39)
Offline
#11 2006-08-04 19:46:26
- marios
- Archived Plugin Author
- Registered: 2005-03-12
- Posts: 1,253
Re: vertical nav bar issue on Safari/MAC
It’s hovering nicely though, also checked on Explorer 6/win 2000. and Firefox for windows.
(may be some old stuff remained cached, and the changes didn’t show up correctly)
Ok, good night and sweet dreams.
regards, marios
Last edited by marios (2006-08-04 19:47:45)
⌃ ⇧ < ⎋ ⌃ ⇧ >
Offline
Re: vertical nav bar issue on Safari/MAC
jakob you can use the FF developer toolbar for live testing
sure, I do that all the time, but that’s firefox, you can’t test safari with it. How does one do that?
never managed to get web tool kit working for Safari though. It allows live CSS editing as well.
marios, I just downloaded a recent webkit nightly and ran it straight from the image. It works alongside safari without impacting on it. The inspector was ready and waiting: right-click on an element of the page and choose inspect. I like what I saw, great to navigate, but I could not find a way to live edit the css to test alex’s problem. Have I missed something?
alex. I see the hover too - and think it looks fine _with_ the hover.
If you want the full height hover in IE try setting the inner element .mainNavi h2 a to display:block;@, put the vertical padding in it too instead of in the outer .mainNavi. You’ll have to adjust some other padding again for the about and for ff/opera but that’s easier.
TXP Builders – finely-crafted code, design and txp
Offline