|
CSS - List-style Menu Alignment Problems
On this page:
http://www.prioritypie.f2s.com/tremaer/_location/location.htm I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this? And why doesn't the background for the containing div show up in FF when it does in IE? I had hoped a glass of red wine would help.... Similar Tutorialsits not so much of a problem because i have "thought" of a remedy (at the end of the post) but i was looking for perhaps a more css'esque solution? if you go here http://www.zahra-zahra.com/fullpage.html you will see menus in the middle somewhere and you will see when the lis go on the second line they are mismatched.. is there a way to match them up precisely? now the solution which i was thinking was is that to have four arrays and then put them in four divs and then place them side by side. btw: the menu will be stored in database Hey guys, I'm trying to aling my menu in my new website. I'm trying to align the buttons on the bottom of the dark div on the top of the page. Its not working at all, and FF en IE are showing different stuff: So, in both browsers, I cant get it to work. I want the two buttons to be aligned on the bottom of the dark part, like tabs. Next to eachother. Any (bright) ideas? Thanks! This is the complete code I'm using: html Code: Original - html Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style> .shadowbox {margin-bottom:4px;background: #dfdfdf; border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;} .lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;} .shadowbox div.normal {position: relative;top: -2px;left: -2px;} #content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;} #header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; } #logo { padding-top: 10px} body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; } h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; } #copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; } </style> </HEAD> <BODY> <div id='header'> <div id='logo'> <img src='images/logo.png' alt='InvenI'> </div> <img src='images/zoeken_inactive.gif'> <img src='images/zoeken_inactive.gif'> </div> <div id='content'> <h1>Mijn Verlanglijstje</h1> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> <div class='shadowbox'> <div class='normal lightyellow'> hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br /> </div> </div> </div> <div id='copyright'> Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br /> InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br /> Geregistreerde namen zijn eigendom van hun eigenaren.<br /> Meer informatie over uw Privacy.<br /> </div> </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.shadowbox {margin-bottom:4px;background: #dfdfdf;
border: 1px solid #f5f5f5; position: relative;top: 2px;left: 2px;}
.lightyellow {padding:10px;background: #FFFFCC;border: 1px solid #B6B6B6;color: #242424;}
.shadowbox div.normal {position: relative;top: -2px;left: -2px;}
#content {width: 90%; margin-top: 15px; padding: 15px; margin-left: 5%; background: #FFFFFF; border: 1px solid #000000; text-align: left;}
#header {margin: 0px; padding: 0px; padding-left: 5%; background: #333333; height: 65px; text-align: left; }
#logo { padding-top: 10px}
body {padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:80%; background-image: url('images/back.gif'); background-repeat: repeat; }
h1 { font-size: 150%; padding: 0px; margin: 0px; padding-bottom: 5px; padding-left: 2px; }
#copyright { text-align: center; font-size: 10px; margin-top: 25px; color: #7D7D7D; }
</style>
</HEAD>
<BODY>
<div id='header'>
<div id='logo'>
<img src='images/logo.png' alt='InvenI'>
</div>
<img src='images/zoeken_inactive.gif'>
<img src='images/zoeken_inactive.gif'>
</div>
<div id='content'>
<h1>Mijn Verlanglijstje</h1>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
<div class='shadowbox'>
<div class='normal lightyellow'>
hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />hoiii<br /><br />
</div>
</div>
</div>
<div id='copyright'>
Geen enkele advertentie wordt gehost op InvenI, InvenI is dus ook niet verantwoordelijk voor hun inhoud.<br />
InvenI.nl is niet verantwoordelijk voor (gevolg)schade ontstaan door het gebruik van deze site.<br />
Geregistreerde namen zijn eigendom van hun eigenaren.<br />
Meer informatie over uw Privacy.<br />
</div>
</BODY>
</HTML>
Hey, I have a drop down menu that when i view it in Internet Explorer is aligned fine but isnt working properly in firefox. I think the problem lies in the white spaces either side of the page. If the page fits the screen snug there isn't an alignment problem, this is better explained when viewing the site on different resolutions. I'm pretty sure the problem lies in the css but i don't know enough pinpoint it. I can't post the address on the forum because of the rules but its www northsidestageschool com (where spaces are dots). Sorry if this breaks rules but my problem really doesn't make any sense with out the link! Any ideas? Mike I'm having a problem with my drop menu
Code: #nav ul a:focus being too wide. It's set at 100%, and will shrink if I set it to 50%, but can't match the different sizes of my menus. Here is the link to the page so you can see when the menu drops, then you hover mouse over one of the links in the list, the image is wider than the box. http://www.alliancemonterey.org/temp/ Here is the drop menu css. Any help would be appreciated Code: #nav,
#nav ul { background-image:url(images/button.gif); list-style: none; margin: 0; padding: 0; z-index: 20000; }
#nav { font-family: Arial, Helvetica, sans-serif; font-size: 0.855em; /* 14px / 16px */ font-weight: bold; height: 2.286em; /* 32px / 14px */ line-height: 1.5em; /* 21px / 14px */ width: 760px; margin: 0; }
#nav li { background-image:url(images/button.gif); float: left; height: 2.286em; /* 32px / 14px */ margin: 0; padding: 0; position: relative; z-index: 10000; }
#nav a { color: #c7d0d9; display: block; padding: 0.286em 5px 0.5em; /* 4px 30px 7px */ text-decoration: none; }
#nav a:hover,
#nav a:focus { color: #fff; background-image:url(images/button_over1.gif); }
#nav ul { background-image:url(images/button_over2.gif); left: 0; font-size: 0.857em; /* 12px / 14px */ line-height: 1.5em; /* 18px / 12px */ position: absolute; top: 2.667em; /* 32px / 12px */ width: 100%; }
#nav ul li { background: none; float: none; height: auto; width: 100%; }
#nav ul a { background: none; padding: 0.083em 30px 0.25em; /* 1px 30px 3px */ width: 70%; }
#nav ul ul { font-size: 1em; }
#nav ul a:hover,
#nav ul a:focus { background-image:url(images/button_over1.gif); width: 100%; }
#nav ul.hover { background-image:url(images/button_over1.gif); width: 100%; }
#nav ul ul { left: 0px; top: 0.5em; /* 6px / 12px */ }
#nav ul,
#nav :hover ul ul,
#nav .hover ul ul { margin-left: -9999px; }
#nav li:hover>ul,
#nav li.hover>ul,
#nav a:focus>ul,
#nav ul ul,
#nav .hover a:focus { margin-left: 0; }
#nav ul a:focus { margin-left: 0; }
I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba I'm using: Code: div#iselDiv li {
margin: 5px;
padding: 5px;
display: block;
border: 1px solid #cccccc;
float: left;
}
and: Code: <div id="iselDiv">
<ul>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
<li ><a href="#"><img src="image.jpg" border="0"></a></li>
. . .
</ul>
</div>
to draw thumbnails of images in block style, the problem is they will not align to the left, there is allways extra space larger then margin, like in this image: (when I set float: right, it floats to the right OK, but float: left; has a problem ). Help? I have a custom list where the list elements will show horizontally across a row until they can't, and then bump down to the next row. I use it for a gallery of pictures. The problem is, there is all this extra padding on the left of the list for some reason that I can't seem to get rid of. I'm not sure what is causing this. I attached the picture and here is the CSS for the <ul> tag Code:
.photolistitem
{
position: relative;
display: block;
float: left;
list-style-type: none;
height: 140px;
width: 140px;
padding: 5px;
border: solid 1px black;
margin: 5px;
background: white;
text-align: center;
}
Here is the HTML. There is PHP in there to get each photo Code:
<ul id="sortable">
<?php
$pics = $DB->query("SELECT * FROM pictures WHERE gallery_id='".$gallery['id']."' ORDER BY position ASC");
$num = $DB->rows();
if ($num > 0) {
while ($pic = $DB->fetch()) { ?>
<li class="photolistitem">
<table>
<tr>
<td class="imageCell">
<a rel="group" class="gallerypiclink" href="pictures/<?php echo $pic['filename']; ?>" title="<?php echo $pic['caption']; ?>"><img class="gallerypic" name="<?php echo $pic['filename']; ?>" galleryid="<?php echo $pic['gallery_id']; ?>" src="pictures/thumbs/<?php echo $pic['filename']; ?>" width="<?php echo $pic['thumb_width']; ?>" height="<?php echo $pic['thumb_height']; ?>"></a>
</td>
</tr>
<tr>
<td>
<p>
<a href="#" class="delete">Delete Picture</a><br />
<a href="#" class="editCaption">Edit Caption</a>
</p>
</td>
</tr>
</table>
</li>
<?php }
} else {
echo "<p id=\"none\">No images uploaded yet</p>";
}
?>
</ul>
There is just one table around the list with only the list in it. I made the bgcolor of it blue to highlight the issue. Thanks Hi there, I have a list which I want to display the sub items without any left spacing.. so they are listed directly beneath the parent item. It works fine in IE, but not in FF or Opera. This is what I have: Code:
<ul id="treemenu1" class="treeview" style=" padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 10px; padding-left: 0px;" >
<li style="list-style: none;">
<img src="images/arrow.gif" border="0" >
<a class="nav_main" href="#"><strong>Parent Item</strong></a>
</li>
<ul style="list-style: none;">
<li style="border-bottom: 1px dashed #444444; padding-top: 3px; padding-bottom: 3px; list-style: none; margin-left: 0px; "><a class="nav_sub" href="page"><img src="images/arrow.gif" border="0" >Sub Item</a></li>
etc...
I have tried use margin-left: 0px but that still doesn't work. Any ideas what I'm doing wrong? Hello, I am trying to create a drop down list with a label, and have them align. I simply want the label to display left of the drop list. I can't seem to get them to do it. It sits inside a topoptsbox div tag (css below). Code: <form name="bpmform"> <label for="bpmfrom" class="bpmddl">BPM From</label> <select class="bpmddl" id="bpmfrom" name="bpmfrom"> <option id="0from" value="0">0</option> <option id="50from" value="50">50</option> <option id="100from" value="100">100</option> <option id="150from" value="150">150</option> </select> </form> Code:
#topoptsbox {
border-style: inset;
border-width: 1px;
width: 1000px;
height: 80px;
float: left;
display: block;
}
Hi Guys, I'm having trouble with some alignment. I have a main div called 'left_sidebar' that has a few elements contained within it. At the top is a div that contains a user's profile pic, their name, and a link to edit their profile. Below that will be some navigation links, and some other items that will be dynamically populated depending on the page. The div that contains the photo, name, and profile edit link is giving me some trouble. Here's a pic of how it is currently Here's what I'm hoping to get. Below is the code I have. Nothing is being inherited that should affect how it's laid out or presented. Thoughts? I'm racking my brain and can't get this right. Also.. I need the border div to expand since the height of the image will not be set in stone. Code:
#left_sidebar
{
float: left;
margin: 0 0 .5em .5em;
width: 160px;
}
#left_sidebar_border
{
border: 1px solid #e87b02;
overflow: auto;
height: 100%;
margin: 0em 0em 1em 0em;
}
#left_sidebar_pic
{
margin: .5em .5em .5em .5em;
}
#left_sidebar_name_action_container
{
margin: 0em 0em 0em 0em;
}
#left_sidebar_name_action
{
}
#left_sidebar_name
{
}
<div id="left_sidebar">
<div id="left_sidebar_border">
<div id="left_sidebar_pic">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
<img style="float:left"src="http://details.at/imagehost/profiles/539/xs_IMAG0513.jpg">
</a>
</div>
<div id="left_sidebar_name_action_container">
<div id="left_sidebar_name">
<span class="mediumboldtext">
<a href="http://details.at/members/members.cfm?q=mpv1&url=jasonallenking">
Jason King
</a>
</span>
</div>
<div id="left_sidebar_name_action">
<span class="mediumtext">
<a href="http://details.at/members/members.cfm?q=pbi">edit profile</a>
</span>
</div>
</div>
</div>
</div>
Hi Guys, I'm trying to create a simple search form. It will be a set of horizontal links seperated by pipes '|' with a simple form field search box below the set of links. I've it pretty much laid out how I want, but the links above the search box are not alinging with the search box correctly. I want the links pushed up against the text box. Here is a pic showing how I want it to look. The first search box is how my code display now. The second box is what I am trying to achieve. http://i617.photobucket.com/albums/...aderexample.jpg Here is the code I have. I'm hoping to create a div that will wrap around this code and contain it well. I have a div defined in the code, but it doesn't have any attributes. Any advice on how to change this to get it to display how I want? Please note, the span/class attributes found in the code relate to a style sheet I have defined elsewhere. However, it doesn't affect the alignment so I didn't include the stylesheet. There is no other CSS defined yet. My guess is I need to define a class for the DIV and parameterize that class to smash the two elements (links and search box) together. Code: <div> <a href="http://www.company.com" class="active" title="Cars for Sale"> <span class="headersearchlink">Vehicles</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" class="active" title="Aircraft"> <span class="headersearchlink">Aircraft</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Homes for Sale or Rent"> <span class="headersearchlink">Homes</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Apartments"> <span class="headersearchlink">Apartments</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Jobs & Resumes"> <span class="headersearchlink">Jobs</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Pets for Sale"> <span class="headersearchlink">Pets</span></a> <span class="mediumtext">|</span> <a href="http://www.company.com" title="Items for Sale"> <span class="headersearchlink">Items for Sale</span></a><br> <form method="post" action="" name="search-form"> <INPUT class="headersearchinput" type="Text" name="postal" size="85"> <INPUT class="headersearchinput" type="submit" name="search" value="search"> </form> </div> Almost got my layout sorted, however i am having a really anoying alignment issue in Ie6, firefox works fine. The right-content div is off by 3px, i cant work out why. I am having to use two divs as opacity is inherited by child content in each div - i get round this by overlaying a 'content div' with absolute positioning. Page can be seen he www.monsterserve.net/new.htm and code is below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#container
{
position:relative;
width: 900px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 10px; /* offset 10px from page top */
text-align:left;
border: 1px solid black;
/*background-image: url('car.jpg');
background-repeat: no-repeat;
background-position:bottom right;*/
}
#left
{
width:500px;
float: left;
border-right: 1px solid black;
height: 500px;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#right
{
margin-left:600px;
width:200px;
height:500px;
border-right: 1px solid black;
border-left: 1px solid black;
background-color: gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}
#left-content
{
position:absolute;
width: 500px;
left:0px;
top:0px;
}
#right-content
{
left: 603px;
\left: 602px;
l\eft: 603px;
position:absolute;
background-color:#0066CC;
position:absolute;
width:200px;
top:0px;
border: 1px solid black;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="left-content"></div>
<div id="right-content">right content</div>
</div>
</body>
</html>
Thanks in advance, PS> note that i have tried doing that \ thing for positioning (i saw someone doing that for width so i thought it may work for positioning too ) I am currently working on a site with a content section and a menu to the right of it. Im using CSS to do this and it seems to work in firefox, but not IE. What I mean is that the menu that is suppose to be to the right is all the way at the bottom and it should be right next to the content section. Do I have my index.php right? Example: <div id="content"> </div> </div id="rightMenu"> </div> I tried using float: left; on the rightMenu section, but it doesnt seem to work. Any hacks to make this work in IE? If you take a look at http://www.babbnet.com/dev/test_2.html you'll see that I'm trying to float images in text. I'm seeing a couple of problems with this. Both problems are evident on the first image. Firstly the text is overlapping the image slightly. Secondly the clear:left property is causing the first image to position itself below the menu block on the left. The image's should actually be level with the start of the text. Can anyone suggest what might be done? Thanks, Geoff my page apears perfectly in safari and mac ie but it incorrectly in pc ie. the div 'container' is centered in safari and mac ie but left aligned in pc ie. here is the css and html that effects it: css: Code: body {
background: repeat-y center url(bgglow.gif);
margin-top:0;
}
#container {
background: no-repeat url(bg.jpg);
width: 788px;
height: 427px;
border: solid;
border-width: 1;
margin-left: auto;
margin-right: auto;
}
#links {
position: absolute;
top: 5px;
width: 180px;
border: solid;
border-width: 1;
}
html: Code: <html>
<body>
<head>
<style type="text/css" title="currentStyle">
@import "style.css";
</style>
</head>
<div id="container">
<div id="links">
...
</div>
<div id="content">
<p>
..
</p>
</div>
</div>
i have attached a screenshot from safari of how it is meant to look, and a screen shot from pc ie. thanks for any help! I can't get the Sidebar and Content divs to line up with each other. I tried floating sidebar left and content right but that only made it worse. What am I missing? http://ror.twisted-delusions.net/template/brc.html http://ror.twisted-delusions.net/template/style2.css Actually, I just realized I was trying to float and position relatively. But when I removed the positioning and just used floats it would not stretch my container div, howcome? I added clear all but that didn't do anything. http://ror.twisted-delusions.net/template/brc2.html http://ror.twisted-delusions.net/template/style3.css -------------------------------------- OK, NVM, I needed a div below the floats to clear them >.< you can close this topic. I have a joomla site that i have install joomla with autostand all works fine but when i turn on the slider it mess the hole design up how can i sort this. It also w3c validator show errors after i turn it on. Any help would be great my site here So far I've been unable to find the answer to this question despite numerous Google searches, and am sincerely hoping someone here can give me the definitive answer. I have an unordered list which requires use of the decimal-leading-zero list style type. However, I need to start the number at 00 instead of 01. In HTML the way you do this is to put inside the UL tag start="0", but this is not validatable, and actually deprecated. How can I begin a list with 00 rather than 01 for the decimal-leading-zero list-style-type? TIA for all help and advice. I am trying to use ul list to organize my images. Here is how it should look like. IMAGE IMAGE IMAGE text text text But instead, I get IMAGEtext IMAGEtext IMAGEtext Code:
<style>
/**************************************************************
Thumbnail Lists
**************************************************************/
ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}
ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}
ul.thumbs li.pagination {
margin: 10px;
padding: 0px;
list-style: none;
display:block;
}
a.thumb img {
border: 5px solid #ccc;
}
a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #000;
}
a:hover.thumb {
background: none;
}
a.thumb span {
width: 100%;
display: block;
margin-top: -5px !important;
margin-top: -2px;
}
</style>
<ul class="thumbs">
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/8P5B7K8M_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=13" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/7K4V6F7H_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=12" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/0C7O9X0A_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=11" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li>
<a href="#" class="thumb"><img src="/FLPM/media/news/images/1Q8B0L1N_sm.jpg" alt="" class="floatLeft" /></a>
<a href="?Process=DeleteImage&IMAGEID=10" class="thumb"><span class="floatLeft">DELETE</span></a>
</li>
<li class="pagination">1. </li>
</ul>
|
|||||||