|
CSS - Duplicate Link Items <li> </li>
Hey everyone,
I have a listing of links on my sitemap and there seems to be an issues. In firefox it's not so bad, it just looks like the bullets are ghosted. But in IE there are blank empty list items. I don't see anything in the code that can do this but it is kinda strange that it starts where I have ‹ and ›. Other than that there is nothing different between the list items. Any insight is greatly appreciated. Similar TutorialsWe have our magento store with lots of categories, but it looks silly with categories being added under the first row. We'd like to have these added on a row above this, but i am having a hrd time getting this done. Is there an easy way to have category items being added on top in a new row, instead of a new row under the current one? Simply put, instead of this way: 1 2 3 4 5 6 7 8 9 We want it this way: 6 7 8 9 1 2 3 4 5 As you understand this will look much better and not screw with our design;-) Anybody? Hi, In constructing my site www.brilliantprints.com.au. I used duplicate div ids for each line of the navigation menu. It displays fine in IE but breaks in Firefox. The menu is controlled by an individual style sheet. chromestyle.css I've been trying to fix it for almost a week now - but can't seem to come up with a solution that a) validates b) Isn't broken. In terms of positioning and controlling the second div id (the lower navigation menu) does anyone have some quick suggestions. I'm willing to go the hard yards if its a major problem - just run out of ideas. Thanks Dylan Hey there, thanks for any help in advance. I'm struggling to understand why an image is repeating even though I have it set to no-repeat. Any idea what's going on and how I can fix? Here is the site: 168.144.130.40:8080 The image that is repeating is the girl blowing bubbles: images/bath.jpg Thanks!! Matt PROBLEM: I create a nice button using the sliding doors technique for rounded corners. But the button displays with 100% width unless I float it. My layout requires that the buttons be inline with the text, so floating won't work. Anyone know an alternative? I wouldn't mind floating but I want the button to show inline with the text. When I use float:left, it removes it from the inline flow. Basically, I want a very modular button that can be used in several different places on a page. In many cases, floating is fine because the mockup has it out of the inline text, but I want to use it there, too. Here's the HTML: <a class="button" href="#"><span>Update Profile</span></a> Here's the css: a.button:link, a.button:visited { background:url(button_right.gif) no-repeat right top; } a.button span:hover, a.button span:active { background:url(button_left_hover.gif) no-repeat right top; } a.button span { background:url(button_left.gif) no-repeat left top; color:#fff; cursorointer; display:block; height:20px; line-height:20px; margin:0 2px 0 0; padding:0 10px; position:relative; white-space:nowrap; } http://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. I have a floated CSS Horizontal Drop Down Menu, it's centered in my page just fine in firefox, but in IE it's skewed way off to the right side. (Also having problems with the dropdown's not appearing in IE :S) If anyone can help me with IE fixes on either of these problems that would be great. Thank you! whats the CSS for creating an unordered list that goes across the page rather than down with no bullet points? I'm using a menu from CSSPlay, and I have it working. http://www.wattersisere.co.uk/devshed It also works for browsers with 800x600 screens. However, as you can see the menu items on the top bar are close together (2 * 11px). I am wanting to increase the spacing between them depending on the browser size. Maybe a % would be appropriate, any other ideas would be super. Alternatively, I could increase the spacing between them to an aesthetically pleasing size and then force the smaller browsers to have a horizontal scrollbar. What would I have to make this work, or would you not recommend it? Thanks, Watters #leftNav ul { margin:0; padding:0; list-style-type: none; } #leftNav ul li { padding:0; margin:0; display: block; text-align: left; background-color: #000; border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; border-right: none; width:130px; } for some reason I am getting black boxes, with the white outlines.. but in between each LI.. i get spaces? how do you control the spacing between li's in a ul? Hi Guys, I am trying to incorporate a CSS file into an xml document.I have the following problem. My XML file is: <!-- example of an list item --> <?xml-stylesheet type="text/css" href="styledocument.css" ?> <document> <employee> <firstname>peter</firstname> <lastname>lance</lastname> </employee> </document> My corresponding styledocument css file is : employee {display:list-item;color:red;} firstname {display:inline;} lastname {display:inline;} --- Output in IE5: peter lance ----- The expected output should be peter and lance as list items with bullets preceding them and in red color. But my output is peter lance in just red color without any bullets. List-item value of the display attribute is not recognised at all. Can u help deal with this problem!!! Hi, I have a list of items, but when one item goes onto the next line, It doesn't align with the text above it. Here is an example. Look at the right hand column, and notice how the list items, when they go into 2 lines, the second line aligns with the bullet point and not the text. Anyone know how to fix this? thanks I've tried the popular tricks to figure this out, but don't seem to have the touch. In IE, the list item is 2px taller than in FF. page: URL Removed CSS: Code: .mainNav ul {margin: 0; padding: 0; list-style: none;}
.mainNav ul li {border-top: 1px solid #27466c; border-bottom: 1px solid #021940; background: url('../images/menu_bg.gif') top left repeat-y; display: block;}
.mainNav ul a, .mainNav ul span {display: block; height: 17px; padding-top: 4px; font: 11px Verdana,Sans-Serif; color: #ffffff;}
.mainNav ul a:link, .mainNav ul a:visited {text-decoration: none;}
.mainNav ul a:hover{text-decoration: none; color: #9fb3cb;}
.mainNav ul ul ul a:hover, .mainNav ul ul ul ul a:hover {text-decoration: none; color: #3e5064;}
.mainNav ul ul li {border: 0; background: url('../images/sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul li {border: 0; background: url('../images/sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.mainNav ul ul ul ul li {border: 0; background: url('../images/sub_sub_sub_menu_bg.gif') top left repeat; border-top: 1px solid #627996;}
.unselected, .selected, .empty {display: block; float: left; height: 21px; width: 22px;}
.currentPage {border-right: 4px solid #000530; margin-right: 1px;}
HTML on page (it's quite heavy) Hi, Can somebody tell me why the menu on the url below needs so much space between menu items? (between the home, browses, forms, pages). Maybe a margin / padding problem, but I cannot seem to find it. The URL: http://www.genwise.com/temp/ordersbrowse.aspx.htm Thank you! -- Fizgig2 Hey all, Here's the site in question. It validates, and more or less displays how i want it in FF. Thing is, is that in IE it displays the menu button images in reverse order...i have NO idea why it's doing this. It's based off the alistapart menu, that i've used numerous times without problems. Here's the HTML; Code:
<ul id="nav">
<li><a href="index.php"><img src="images/home_button.gif" alt="Home button image"></a></li>
<li><a href="about.php"><img src="images/about_button.gif" alt="About Freedom Boat Sales button image"></a></li>
<li><a href="#"><img src="images/inventory_button.gif" alt="Product inventory button image"></a>
<ul>
<li><a href="newproducts.php" class="menutext">new</a></li>
<li><a href="preownedproducts.php" class="menutext">pre-owned</a></li>
</ul>
</li>
<li><a href="#"><img src="images/requests_button.gif" alt="Request button image"></a>
<ul>
<li><a href="requests.php?item=products" class="menutext">products</a></li>
<li><a href="requests.php?item=pricing" class="menutext">pricing</a></li>
<li><a href="requests.php?item=brochure" class="menutext">brochure</a></li>
</ul>
</li>
<li><a href="contact.php"><img src="images/contact_button.gif" alt="Contact button image"></a></li>
</ul>
Here's the CSS; Code:
#menuposition {
width:730px;
height:30px;
position:relative;
margin:auto;
z-index:10;
}
ul#nav {
list-style: none;
height:30px;
width:730px;
}
ul li {
float:left;
height:30px;
width:146px;
position: relative;
}
li ul {
position: absolute;
top:30px;
display: none;
list-style:none;
}
ul li a {
display: block;
text-decoration:none;
text-align:left;
font:10px verdana, arial, sans-serif;
}
li:hover ul, li.over ul {
display: block;
margin-left:20px;
margin-top:-1px;
width:118px;
background-color:#E7E7E7;
border-top:2px solid #666;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
}
.menutext {
width:118px;
height:30px;
}
a.menutext {
color:#255CB8;
text-decoration:none;
}
a.menutext:hover {
color:red;
text-decoration:none;
background-color:#DCDCDC;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: right; }
* html ul li a { height: 1%; }
/* End */
Also, any thoughts on why the blue background won't extend the full screen height in FF? Thanks! Hello Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link? PS. no Javascript code needed, is their an alternative in css? Hello, I'm new to this site which is really interesting, I hope a nice soul will be able to help me... I've tried to solve this but I can not find the solution. my site is here, the code are too long to post here. I hope the moderator will understand. moureau . me / pro.xml moureau . me / site.css The products menu has a problem... As you can see. If I use display-block or -inline-block the result is different but never ok. If I use Inline-Block, all the drop down menu items have the width(+padding) of the father menu except the last line which is longer without the right padding also, text and background. If I use Block, all the drop down menu items have the width(+padding) of the father menu but the last line goes out of the menu only during an hover and just the text, not the black transparent background which has the same length as other drop down menu items... What should I add to solve that ? I would like the menu to be large enough to show all the items. I'm using ImpressPages.org CMS that's why I can not use another layout for these menus. Thanks a lot. I have a site that is using the suckerfish style dropdown sorta... On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region... Any help would be appreciated. Here is the CSS for that section: Code: /*******************************/
/* BEGIN: Drop-Down Styles */
/*******************************/
#navigation, #navigation ul {
position:absolute;
padding: 0;
margin: 0;
list-style: none;
line-height: 20px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
font-weight: bold;
}
#navigation li.main {
text-align: center;
}
#navigation ul {
margin: 0 0 0 -1px;
}
#navigation a {
display: block;
background-color: transparent;
color: #F1F1F1;
text-decoration: none;
padding: 2px 4px 2px 6px;
z-index: 10;
}
#navigation li {
float: left;
width: auto;
border: solid 1px #0f2344;
border-right: none;
background-color: #0f2344;
color: white;
z-index: 10;
}
#navigation li li {
border-right: solid 1px black;
border-bottom: none;
width: 160px;
}
#navigation li.last {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li.hr {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li ul {
position: absolute;
width: 160px;
display: none;
}
#navigation ul ul {
margin: -20px 0 0 160px;
}
#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
display: none;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul {
display: block;
}
#navigation li:hover, #navigation li.over {
color: black;
background-color: #467BB4;
cursor: pointer;
}
#navigation li:hover>a { /* IE/Win ignores this declaraion */
color: black;
background-color: #467BB4;
}
And a segment of the HTML I'm using. Code: <ul id="navigation"> <li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a> <ul> <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a> <li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a> <li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a> </li> </ul> </li> I have a list, Each item has a graphic as a background image, so each li is 60px high Some of the text is long and wraps Some of the text remains on one line This means the the spacing is not consistent and looks a little odd I've tried Code: ul#myListId li {
vertical-align:middle;
}
and Code: ul#myListId li * {
vertical-align:middle;
}
This has no effect in any of the browsers Hello, I'm customising a theme in wordpress and having a problem centering the three widgets that appear in the footer at the bottom. Nothing seems to work that I have tried. I know very little about css but understand the basic principle but can't seem to find the problem. I want the footer to be 100% the width of the page and for the three wigets to be in a single row of 3 but in the center and not off to the left. I've tried adjust the float but it just stacks them on top of each other set to none and over to the right set to right... I've inlcuded the CSS below and also the code in my footer.php page. Thanks in advance. test site is http://mtbireland.com/hkr Code: </div>
</div>
</div>
<div style="width:100%; text-align: center; margin: 0 auto;">
<div id="footer"><div id="footer-left">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 1') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<div id="footer-middle">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 2') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
<ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('footer 3') ) : ?> <li>
<?php endif; ?>
</ul>
</div>
Code: #footer {
height:200px;
padding:20 0 0 0;
color:#FFFFFF;
font-size:12px;
font-weight:normal;
line-height:20px;
font-family: Tahoma,georgia,Century gothic, Arial, sans-serif;
width:100%;
float:left;
background:#392E2C;
text-align:left;
}
/* Footer Widgets */
#footerwidgets {
display: block;
width:100%;
background:#392E2C;
}
#footer-left {
width: 210px;
float: left;
margin: 15px 10px 10px 30px;
padding: 10px;
text-align:left;
}
#footer-middle {
width: 210px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
#footer-right {
width: 210px;
float: right;
margin: 15px 10px 10px 15px;
padding: 10px;
text-align:left;
}
hello! i'm trying to line up some text in my unordered list but haven't been able to figure out the CSS to make it look something like this: Code: Accomplishments: Job title some job here another job yet another job Duties Designed company website. Proofread advertisements Code: <div id="resume"> <h4>Accomplishments</h4> <ul> <li>Job title</li> <ul> <li>some job here</li> <li>another job</li> <li>yet another job</li> </ul> <li>Duties:</li> <ul> <li>Designed company website.</li> <li>Proofread advertisements</li> </ul> </ul> </div> so i tried doing stuff like Code: div#resume ul li ul {
position:absolute;
top:-20px;
left:50px;
}
div#resume ul li ul li{
float:none
position:relative;
}
i can't get the words, "Job title" to line up horizontally with the first list item, then have the list items listed vertically like in my example up top (i know it doesn't line up perfectly in here) can someone correct my css?? thanks! drGiggles |
|||||||