Space Problem in {NAV_LIST_TOP}

ssyfrig · Post by **ssyfrig** » Wed 11. May 2005, 22:56

Hello

if I check the page source I see that the DIV should load the class list_top

<div id="list_top">
  <ul id="list_top_ul">
    <li id="list_top_home_active"><a href="index.php?index" id="list_top_home_active_link">Home</a></li>
    <li><a href="index.php?id=4,0,0,1,0,0">Unternehmen</a></li>
    <li><a href="index.php?id=1,0,0,1,0,0">Dienstleistungen</a></li>
    <li><a href="index.php?id=2,0,0,1,0,0">Kontakt</a></li>

    <li><a href="index.php?id=3,0,0,1,0,0">Links</a></li>
  </ul>
</div>

But I don't have any calls named list_top. So i tried with

Code: Select all

#list_top {
	height: 15px;
}

but it doesen't work

I am wrong?

thanks, Sven

pico · Post by **pico** » Thu 12. May 2005, 00:19

hab mal gespielt

CSS-Part - hoffe das ist alles was nötig ist

Code: Select all

/* CSS for the top level list */
#list_top_ul {
	padding: 1px;
	margin-left: 11px;
	font-family: Arial, Verdana, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight:bold;
}
#list_top_ul li {
	list-style: none;
	margin: 0;
	display: inline;
}
#list_top_ul li a {	
margin-left: 0px;
	text-decoration: none;
	border-bottom-style: solid;
	background-color: #7fa1C0;
	border-bottom-width: 1px;
	border-color: #ffffff;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	float:right;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 2px;
	padding-left: 3px;
	font-size: 12px;
	font-weight: normal;
	border-top-width: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	height: auto;
	border-top-color: #000066;
	border-top-style: solid;
}
#list_top_ul li a:link { color: #ffffff; }
#list_top_ul li a:visited { color: #ffffff; }
#list_top_ul li a:hover {
	color: #000000;
	border-color: #000066;
	background-color: #dedede;
}
#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
	background: #000066;
	border-bottom: 2px solid #000066;
}

und im Template Head-bereich

Code: Select all

<table width="767" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr valign="bottom">
             <td width="251"><img src="http://www.wyler-consulting.ch/picture//layout/logo_250x64.gif" alt="Banner"></td>
            <td width="526" align="right">{NAV_LIST_TOP}</td>
          </tr>
          <tr valign="top">
            <td colspan="2"><img src="http://www.wyler-consulting.ch/picture//layout/navi_underline.gif "></td>
  </tr>
</table>
<br />

das ganze zu sehen hier http://www.hdk-online.de/kt.phtml

allerdings ohne die oben Beschriebene CSS änderung - aber um die Farben und Ränder gehts ja nicht

ssyfrig · Post by **ssyfrig** » Mon 16. May 2005, 00:15

Hi Picco

I create a new css with the code from your post. It work’s with Firefox but unfortunately not with IE.

I also tried the css part from your frontend.css. Same issue Firefox ok IE not.

But I connect to your sample it works with both browsers. Strange!

I also copy the template code from this post in a new template.

I love this navigation

Thanks, Sven

http://www.wyler-consulting.ch/index.php?demo

Kosse · Post by **Kosse** » Mon 16. May 2005, 11:09

Try this (a little css "hack") but as I always say: it is not he "proper" way of doing it but it works

replace your list_top div in frontend.css

You had:

Code: Select all

#list_top {
    height: 15px;
}

Replace with:

Code: Select all

#list_top {
    position: relative; /* added: both IE and FF see this */
    height: 15px;
    top: 16px; /* added: both IE and FF see this, but IE puts it 16 px lower then the base line */
    # top: 0px; /* added: only IE sees this and puts the menu were you want, at the baseline */ 
}

Did it on http://www.wyler-consulting.ch/index.php , works in FF 1.0.4 (you should install the web developer extension from firefox, very usefull) and IE 6.0

These little "hacks" are pretty cool as CSS (C as in cascade) only interprets the last thing it sees. So, you put a "hack" for IE (the # that IE ignores) and he discards the top: 16px and only uses the top: 0px.
Off course, when working you can remove the /* comments */

The only thing to keep in mind is if one day IE complies to W3C CSS rules, you'll have to rewrite the code...
BTW, this is not really a "bug" of phpwcms dev release, It is a CSS issue (to be fixed by W3C and/or FF and/or Microsoft <--- choose who to blame... I know who I would blame

)

Cheers

Ben · Post by **Ben** » Mon 16. May 2005, 16:16

I have realized that one of the css classes for {NAV_LIST_TOP} is named incorrectly, I believe. Problems do not occur in IE, but in FireFox unless you make this fix. Here it it:

Change this

Code: Select all

#list_top_ul {

To be this

Code: Select all

#list_top ul {

This fixed a lot of spacing issues for me in FireFox.

ssyfrig · Post by **ssyfrig** » Mon 16. May 2005, 16:42

Hi Kosse

Yes, thanks it work with your additional code.

@Ben
Also thanks for your input. unfortunately it doesn’t work for Firefox.

I installed the web developer extension, very cool add-on

But I just wondering do you know the solution or fid it out with the developer extension.

thanks, Sven

end the end this is the css part that works with IE and Firefox

Code: Select all

/* CSS for the top level list */

#list_top { 
    position: relative; /* added: both IE and FF see this */ 
    height: 15px; 
    top: 16px; /* added: both IE and FF see this, but IE puts it 16 px lower then the base line */ 
    # top: 0px; /* added: only IE sees this and puts the menu were you want, at the baseline */ 
} 

#list_top_ul {
	padding-left: 0;
	margin-left: 0;
/*	background-color: #036; */
	color: White;
	float: right;
	font-family: arial, helvetica, sans-serif;
	width: 80%;
}
#list_top_ul li {
	display: inline;
}

#list_top_ul li a {
	padding: 0.2em 1em;
	background-color: #7FA1C0;
	color: White;
	font-size: 10px;
	text-decoration: none;
	float: left;
	border-right: 1px solid #fff;
	border-bottom: 0px solid #fff;
}
#list_top_ul li a:link { color: #FFFFFF; }
#list_top_ul li a:visited { color: #FFFFFF; }
#list_top_ul li a:hover {
	color: Black;
	background: #7FA1C0;
}
#list_top_ul li a#list_top_active_link, #list_top li a#list_top_home_active_link {
	background: #004381;
	color: #FFFFFF;
	border-bottom: 1px solid #004381;
}

Kosse · Post by **Kosse** » Mon 16. May 2005, 17:02

Hi ssyfrig

no, I didn't know but the web dev extension helps you to see online -and directly- the changes you make to a css (helpfull, isn't it?)

As for the solution, just checked the DIV, there are many height problems when comes to FF and IE, so I guessed and found, just luck.

Happy that you could solve it!

This forum's official song should be Joe Cocker "With a little help from my friends..."