|
CSS - Moving To Em For Measurement; Menu Display Issue
Hi all!
I have just started a not so small project converting my layouts to EM units. I have got so far and have a nav menu based on nested lists. (This code was saved by ie and then formatted cleanly for inclusion here, so please ignore the capitals for tags and lack of quotation marks). Quote: <DIV id=topNav> <UL id=nav> <LI class=long><A class="firstParent selected" href="http://www.wellandpower.net/" alt="Diesel Generator Sets">Generator Home</A></LI> <LI class=long><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Products</A> <UL> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_products">Generator Product Range</A></LI> <LI><A href="http://www.wellandpower.net/gallery/">Generator Image Gallery</A></LI> <LI><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_certification">Generator Certifications</A></LI> </UL> </LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_services">Services</A></LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_about">About Us</A></LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_contact">Contact Us</A></LI> <LI class=short><A href="http://www.wellandpower.net/perkins_diesel_generator/WP150/index.php?wwwreq=www_support">Support</A> <UL> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support">Generator Support Page</A></LI> <LI><A href="http://www.wellandpower.net/forums/" target=_blank>Diesel Generator Forums</A></LI> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_support_spares">Diesel generator Spare Parts</A></LI> <LI><A href="http://www.wellandpower.net/index.php?wwwreq=www_links">DieselGenerator Support Links</A></LI> </UL> </LI> <LI class=short><A href="http://www.wellandpower.net/index.php?wwwreq=www_tracking">Tracking</A></LI> <LI class=right><A href="http://www.wellandpower.net/wpmm-online3/index.php">WPMM Home</A></LI> </UL> </DIV> The nested list works perfectly when then font-size in the browser is set to medium or smaller. When it gets larger, it all seems to get bigger with no problem, except I get the menu "about us" shifting down about 0.3em or so. I tried deleting the "about us" menu, and the same effect happened but with the next menu along. I am 100% stummped where this extra space appears from!? Any ideas greatly appreciated. Quote: #topNav {font-size: 0.8em; background-color:#000066;position:relative;z-index:1000;margin:0;padding:0;height: 1.5em; } #topNav ul {padding:0em;margin:0em;list-style:none;background-color:#000066;} #topNav ul li {display:inline;position:relative;float:left;white-space:nowrap;} #topNav ul li.topNavRBorder {border-right:0.05em solid #ffffff;} #topNav ul li.short {width: 8em; border: 1px solid black;} #topNav ul li.long {width: 11em; border: 1px solid black;} #topNav ul li.right {float: right; width: 8em;} #topNav ul li ul li {width: 18em; z-index: 5000;} #topNav ul li a {z-index: 5000; border-left:0.05em solid #ffffff;padding:.3em 0.5em .3em 0.5em;height: 1.5em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;} #topNav p{padding:.3em 0.05em .3em 0.05em;height:0.1em;display:block;text-decoration:none;color:#fff;background-color:#000066;white-space: nowrap;} #topNav ul li a.firstParent {border-left:none;} #topNav ul li a.firstChild {border-top:0.05em solid #ffffff;} #topNav ul li a:hover {color:#99ccfb;text-decoration:none;} #topNav ul li ul li a {border-right:0.05em solid #ffffff;border-bottom:0.05em solid #ffffff;} #topNav li ul {position:absolute;display: none;} #topNav li:hover ul, #topNav li.displayBlock ul {display:block;} #topNav ul li a.selected {color:#99ccfb;} Similar TutorialsHey everyone, The page below displays perfectly in both IE6 and Firefox, but in IE7 my navigation disappears and the right navigation in the header is all crunched together. livedifference dot com slash test slash home I'm not really a CSS guru, but I've tried clearing floats via tons of methods and adding random things, but nothing seems to work. Any help would be GREATLY appreciated, I really need to get this up and running. Thanks, Brad not sure where to go with this. I'm not a great CSS developer by any means. but this is killing me. I'm working on two sites. I've created a login box that changes to member links once logged in. but the box display is not working correctlly. In FF it looks right. but in IE it adds a space below the h2 line. I've set margin and padding to 0 on this and it doesn't seem to matter. Any thoughts? FYI this site is in dev. if you click the member pages you'll see data. on the filter pages there are NSFW words in the list. I've not yet set the permissions so that guests can't see the sample data. the site URL is: 15.e-referrer.com/cms Any help is greatly appreciated. EDIT: Sorry, had to remove the hyperlink code. can't post urls as a new user. 3 years later Hi folks, I have an issue where I'm assuming must be a z-index issue, but I'm not exactly sure. If you have a look at a1e. ca/beta (remove spaces) the site is just a framework for an upcoming design I'm doing, so obviously the site is a major work in progress. In the upper-right hand corner of the site, I've got Google custom search box. Search works great, and I've got the results displaying immediately below the search box in it's own DIV. What I'd like is for the results DIV to overlap all the other parts of the site below it, so there's no bleed-through from the elements underneath. It seems to work fine with the banner and nav menu divs, but anything underneath that (the right column and it's sub elements) bleeds through, while the banner and nav menu does not. Can anyone tell me what I'm missing? Site URL: a1e. ca/beta (remove spaces) Main CSS: a1e. ca/beta /css /main.css (remove spaces) Google Search CSS: a1e. ca/beta /css /googlesearch.css (remove spaces) Hello, I am having a problem with a client's site that I am sure is a CSS wrapper issue. It's happening in IE 7 for me - that is the version I have. It displays fine in Firefox, Opera & Netscape. I would give the link but am not allowed as a new user so I will describe what is happening. When viewing with IE the header starts 1/2 way down the page and the top of the page displays only the body background. If you refresh a few times "most of the time" it will right itself. Here is the CSS code I used: body { background: #240000 url(images/bg3.jpg) repeat-y center top; margin: 0; padding: 0; color: #CC9933; } #Wrapper { background:#240000 url(images/lbg.jpg) no-repeat scroll center top; height:399px; margin:0 auto; width:100%; } Admittedly I do not use CSS in it's pure form. My pages are still table-based layouts and not entirely W3C compliant. I am doing my best to learn how to ditch the tables but in the meantime I still have sites to complete and old habits die hard. I only design as a sideline and for a niche market. So I don't mean to offend any of you who are doing it the right way. This is the first time I have attempted a double background using the wrapper so any help is greatly appreciated. Thank you so much for your time! K Hi All, I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone). The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK). The CSS for the element is: CSS Code: Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;}
.keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;}
The html for the element is: html Code: Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> The image stretches - it works fine on firefox and IE8. The web address is www.wellandpower.net There are 3 of these html elements on the left hand side of the page. TIA Regards Charlie http://www.bath.ac.uk/~su2photo/test.php i've been playing around with the css, trying to get the page to display properly, and i get something which i'm reasonably happy with in firefox, but as always when cross checking, ie drops the ball. this time however, the the difference doesn't seem to be consistent . The two boxes you see, should both have titles flush to the top of their containers. In ie, only one seems to manage this. html: PHP Code: <div id="menubox"> <div class="topic"> <h3>Menu</h3> </div> <div id="menubody"> <ul> <li><a href="index.php?s=1">Introduction</a></li><li><a href="index.php?s=2">Organisation</a></li><li><a href="index.php?s=3">Galleries</a></li><li><a href="index.php?s=4">Communication</a></li><li><a href="index.php?s=5">Equipment</a></li> </ul> </div> </div> <div id="mainbox"> <div class="topic"> <h3>Introduction</h3> </div> <div id="main"> <p> Text <br /><br /> Text </p> </div> </div> css: PHP Code: html, body{ font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #FFF; background-color: #000; text-align: center; } #logoimg{ border: 0px; width: 90px; height: 90px; } div#container{ position: relative; top: 50px; margin: 0 auto; text-align: left; width: 900px; } div#mainbox{ float: left; padding-bottom: 15px; border: 1px solid #290000; background-color: #130000; width: 630px; text-align: center; } div#menubox{ float: right; border: 1px solid #290000; background-color: #130000; width: 230px; text-align: center; } div#main{ margin: 0 auto; width: 600px; text-align: left; } div#menubody{ margin: 0 auto; width: 200px; text-align: left; } div.topic{ text-align: left; background-color: #290000; } h3{ padding-left: 10px; margin-top: 0; } ul{ list-style-type: none; text-align: left; } this one's got me fuzzled, any idea? (if my whole technique is all wrong, then can you suggest a better way?) cheers guys (I apologise for the length of this , i did attempt to cut it down ) Hi I'm developing a new website using non tabular css and xhtml. I've used a predefined template which has been edited to my needs for the project. The problem I have is the top menu displays perfectly in FF3 but not in IE7, the top menu has a width of 100% with each of the 4 links having a width of 25% so in FF3 displays right across the page perfectly, but in IE7 the last menu link breaks to a new line. This url shows the issue im having: http://www.purepcs-store.co.uk/tim/new HTML USED: Code:
<div id="menu" class="width">
<ul>
<li>
<a href="index.php" onfocus="blur()">
<span class="title ">Home</span></a>
</li>
<li>
<a href="products.php" onfocus="blur()">
<span class="title ">Products</span></a>
</li>
<li>
<a href="forum/" onfocus="blur()">
<span class="title ">Forum</span></a>
</li>
<li>
<a href="contact.php" onfocus="blur()">
<span class="title ">Contact Us</span></a>
</li>
</ul>
</div>
RELEVANT CSS: Code:
#menu {
margin: 0 auto;
}
#menu ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
text-align: left;
background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
}
#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li a {
float: left;
width: 25%;
font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;
color: #fff;
border-top: 7px solid #41637D;
border-bottom: 15px solid #FFF;
}
#menu ul li a span {
display: block;
padding: 2px 7px;
}
#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}
#menu ul li a:hover,
#menu ul li a.here {
background: #4A5C6A;
border-top: 7px solid #455660;
}
#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}
.width {
width: 100%;
}
full css code can be seen he http://purepcs-store.co.uk/tim/new/css/layout.css Does anyone have any ideas on how to combat this issue, if you can point me in the right direction it would be much appreciated. Cheers My site has two areas that display a similar looking menu. It's just horizontal links for home, blog, shopping cart, etc. I think it uses a list to display these. My question is if you look the following link, the horizontal menu links at the top display instantly. easylinuxcds.com/blog On this second link they bunch up the the left for a second then spread out into the proper horizontal format. easylinuxcds.com How can I prevent this and have both pages look like /blog? Thank you for reading - Andrew Hi, well i am using quicksand and in it i wanted to use tootips but no one on internet helped me by telling how to do so. So, i am now using css technique, the method is very simple css trick, when you hover over the game icons its details appear, and when you hover over the details then the details disappear. The details disappear in IE and firefox but it is not the case with google chrome. here is the test page http :// letseedrop.blogspot.com/2011/01/testing-8. html i don't know what i am doing wrong, i also tried to use !important in css but it didn't helped. well i am pasting css here too if you don't want to go into the source code Code: .demosa {
position:relative;
top:0px;
left:0px;
margin:0px;
padding:0px;
}
.gamedetailpara {
text-decoration:underline;
color:#000000;
}
ul.gamecolumns {
min-height:300px;
list-style: none;
margin: 0px;
padding: 0px;
}
ul.gamecolumns li {
background:url('(URL )) no-repeat;
position:relative;
display: inline;
width: 114px;
height:118px;
float: left;
margin: 8px;
padding: 0px;
}
ul.gamecolumns li:hover {
z-index: 99;
}
ul.gamecolumns li img {
position:relative;
top:12px;
left:12px;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)"; /*--IE8 Specific--*/
}
ul.gamecolumns li:hover img{
position:relative;
top: 12px;
left:12px;
z-index: 999;
filter: alpha(opacity=100);
opacity: 1;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=100)";
}
ul.gamecolumns li .gamedetails {
position: relative;
left: 0px; top: 0px;
padding: 20px 4px 10px 10px;
display:none;
background:#ffffff;
font:bold 13px "Times New Roman", Times,sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 99999;
}
ul.gamecolumns li .gamedetails:hover {
display:none;
}
ul.gamecolumns li:hover .gamedetails {display: block;}
ul.gamecolumns li:hover .gamedetails:hover {display: none;}
thank you in advance. I just made some css changes on my site yesterday to redesign some pages, and I can't tell if it's all messed up in internet explorer or not. I'm a mac user but I always borrow my roommate's computer to check changes in IE. However, I'm now having an issue where internet explorer doesn't seem to want to show the latest changes, and it even seems to move stuff around into different places when I refresh the page. I tried one solution that didn't seem to do anything, which was changing the option of "check for newer versions of stored pages" under IE Internet Options from "Automatically" to "Every Visit to the Page". The layout of the website looks fine in safari/chrome/firefox and also looks fine on firefox on the PC. I can't think of any other reason why internet explorer would be acting so strange by not showing the latest version and often changing when I refresh the page. Hola, I'm trying to add a menu I got from CSSplay to my site. It's displaying dot in the upper right of each li space in FF, but it's fine in IE. The original file is fine, of course, Anyone ever had this problem? brizfoto dot com slash test reflectionstour.com ^ Site I am working on. So I have these nice little gifs that are curving the corners. In FF3 they work fine and it is XHTML/CSS 2.1 valid. Which of course means that they are not working right in IE 7 (haven't bothered testing 8, as I run Linux and it is hard enough to locate an IE7 to test it on.) So I have tried a few different searches and don't really know what to even call it. And no webdev tool bar on IE to help tell me. "vertical-align: bottom IE7 ~padding" "bottom padding issues IE7" I would rather not do separate CSS sheets as it is a simple site, there shouldn't be an issue here. Thanks! Wil Hi, new here, and to CSS. I have read several of the posts regarding menu problems, but could not find one similar to my problem. Here is my development site, the code should be accessible (or I could post it if you prefer): PaHiker.com It works with all of the browsers except IE (of course). If you move the cursor over Chapters the secondary menu opens up below Chapters (which is what I want) and you can click on the item. In IE the secondary menu opens up, but as soon as the cursor is moved off of the primary item the secondary menu closes. Any help would be appreciated. Thanks, Mike Please Delete Alrite, I have a dropdown menu that is fully CSS driven. The menu works fine except that the dropdown links dont work in Firefox. Once clicked the menu goes to the main heading link for the dropdown menu, instead of the dropdowns item link. However if u right click on the link and say open in new window/tab it works fine. I have attached the files. Thanks a lot Nick I'm trying to update my main navigation bar for my site into a something a bit more useful and clean. I've gotten it to work pretty much exactly as I want to in FF and Opera, but of course it's displaying very wrong in IE. I thought I had found the code needed to fix IE, but I've either used it incorrectly, or it's just not the right bit of code. Here's a page with the navbar live: http://www.skullcrow.com/community_upload.php Here's the css being used: Code: /* horizontal drop down navbar - basic formatting */
#centering_wrap {width:100%; position:relative;}
#menu {margin:0 auto;width: 955px;font: bold 11px/16px arial, helvetica, sans-serif;color:#666;} /* Main width and default font properties */
#menu ul {list-style: none;margin: 0;padding: 0;float: left; line-height:42px;} /* Main format for top categories */
#menu ul ul{ position:relative; top:35px; left:5%; width: 90%;} /* child element widths */
#menu ul li{ background-position:bottom left;} /* set nav bg position */
#menu ul li:hover{ background-position:top left;} /* set nav bg position hover position */
/* Positioning popouts (2nd level only) */
#menu li {position: relative;} /* make "ABSOLUTE" work correctly */
#menu ul ul {position: absolute; z-index: 500;} /* prevent menu from "pushing" contents down */
#menu ul ul ul {position: absolute; top: 0; left: 100%;} /* move child elements to the side */
/* Hover behavior */
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
/* Additional text formatting */
#menu a {display: block;width: 100%;height: 100%;}
#menu ul ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc #323E6B #456594 #323E6B ;
margin: 0;
padding: 3px 4px;
background: #2B3344;
}
#menu ul ul a {color: #CCC;text-decoration: none;}
#menu ul ul a:hover {color: #FFF;background:#06F;}
...and here's the html from the menubar (which is contained in a separate php.includes, if that matters at all): Code: <div id="centering_wrap">
<div id="menu">
<ul style="width:195px;">
<li style="background-image:url(../images/nav_com_home.png);"><a href="http://www.skullcrow.com/" alt="Home"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Storefront</a></li>
<li><a href="http://www.skullcrow.com/community_home.php">Community</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_store.png);"><a href="http://www.skullcrow.com/" alt="Store"> </a>
<ul>
<li><a href="http://www.skullcrow.com/">Shirts</a></li>
<li>Hats</li>
<li>Stickers</li>
<li>Misc Stuff</li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_community.png);"><a href="http://www.skullcrow.com/community_home.php" alt="Community"> </a>
<ul>
<li><a href="http://www.skullcrow.com/forum">Forum</a></li>
<li><a href="http://www.skullcrow.com/community_upload.php">Upload Photos</a></li>
<li><a href="http://www.skullcrow.com/community_designers.php">Submit Shirt Designs</a></li>
<li><a href="http://www.skullcrow.com/skullcrow_blog">SkullCrow Blog</a></li>
</ul>
</li>
</ul>
<ul style="width:188px;">
<li style="background-image:url(../images/nav_com_help.png);"><a href="http://www.skullcrow.com/help.php" alt="Help"> </a>
<ul>
<li><a href="http://www.skullcrow.com/help.php">Contact Us</a></li>
<li><a href="http://www.skullcrow.com/forum/faq.php">FAQ</a></li>
<li><a href="http://www.skullcrow.com/aboutus.php">About Us</a></li>
</ul>
</li>
</ul>
<ul style="width:196px;">
<li style="background-image:url(../images/nav_com_otherstuff.png);"><a href="#" alt="Other Stuff"> </a></li>
</ul>
</div>
</div>
...and finally, here's the small snippet of code I used up in the header of the main php file that I thought was suppose to fix the display issue but didn't: Code: <!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(css/csshover3.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
That last bit is contained at the very of the header, and is the very last item before the </head> tag. In addition to the other 'adjustments', it's also suppose to be including the csshover3.htc file that I thought was suppose to fix a lot of display problems. The site I got that file from is he http://www.xs4all.nl/~peterned/csshover.html Whatever help is always very appreciated. I'm still sort of a css newb, although I think I'm starting to understand more, but IE is a bastard and I think most web developers would probably agree. Thanks again. I was wondering if anyone knows of any tutorials or resources for creating a menu system using css. The problem I have is that when I change the submenu's which are divs to display, they pop into place. I want to change this aspect and assume there is a javascript solution to make the display slow down, but have not been able to find one on this forum or using google. Perhaps a pointer or two? I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link Hi all, Thanks for the interest, I want to set my menus like the categories in alibaba.com ( the menu of the left side), on mouse over the sub menus should come up in the same way as here. How can I achieve this ? Thank you guys |
|||||||