|
HTML - Vertical Alignment Problem With Unordered List
Hello,
I'm trying to program a couple unordered lists into my web page and I encountering a problem. I can't seem to align them with the top of the cell. They act as if there's an extra list item above the first one. Here's the URL to the page: http://www.cactusridgerr.com/CCRR/comfort.htm Here's the code for the bottom two cells with the lists in them: Code: <tr> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Elegant dining room</li> <li>Fireside lounge</li> <li>Library and computer room</li> <li>Craft room & country kitchen</li> </ul> </td> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Wellness and exercise spa</li> <li>Beauty salon</li> <li>Theater and multi-purpose room</li> </ul> </td> </tr> Does anyone know why they refuse to be aligned with the top of the cells? Similar TutorialsHi all, Newbie here. So I've built an HTML website and I want to vertically centralise it because it looks a little funny on larger screens at the moment. I have followed several tutorials worth of direction on how to do it and tables seem to be the easiest but I'm having a problem with getting the table to "fit to window". This is the table instantiation: <table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> The problem is that the height is not working. If I change it to a specific value such as 900px then it works perfectly but it must be getting the wrong value otherwise. Has anyone encountered this before and can you help? The site is http://www.thechapelstudios.co.uk I am hoping that someone may have a solution for me - in one of my table columns I have 3 images (logos that link to sites) and I have set them with a vertical top alignment - so that when the page goes long - the logos stay at the top - this works perfectly in all browsers, except (of course) IE... would anyone know how to fix this? My site can be viewed at http://bebywebtest.9k.com/history.html ... if you click open the collapsible menus - you can see the logos - start to center themselves down the page - instead of staying at the top... <br /> </td> <td width="5" rowspan="3"> </td> <td width="380" height="179" bordercolor="#000066" bgcolor="#FFFFFF"><div align="center"><a href="http://www.israelbonds.ca"><img src="Images/header-march-2006.gif" alt="bonds" name="israelbonds" width="256" height="100" border="0" valign="top" id="israelbonds" /></a></div></td> </tr> SO - if anyone has any suggestions on how to remedy this fiasco - I would be most grateful! Thanks. I'm having a very odd problem with unordered lists. I have made them before like this and they have worked just fine, its odd that now its not working on any browsers. Did HTML standards change lately? Code: <ul style=" list-style-type:circle"> <li><a href="#sitespecs">Site Specs</a></li> <li><a href="#sitehistory">Site History</a></li> </ul> http://www.animeffz.com/codegeass/siteinfo.php Thats all the code i have involved with it =/ but nuttin is showing up. Not a single mention of them in my CSS also. G'day, My unordered list (vertical nav menu) is displaying differently in IE and Firefox. IE displays each item with a large amount of space between them, while FF does not. I want to have a few pixels space between each item, and how do I do this so FF and IE both show the same? Here is the code: Code: #leftnav ul {
list-style-type:none;
color: #fff;
display: block;
text-align: left;
margin: 0px;
padding: 0px;
}
.menu A:link {
display : block;
padding-left : 0px;
text-decoration : none; color:#000000;
font-family: Verdana;
font-size: 8pt;
font-weight: bold;
}
<div id="leftnav">
<ul>
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">Services</a></li>
<li class="menu"><a href="#">PT One on One</a></li>
<li class="menu"><a href="#">PT Group Fitness</a></li>
<li class="menu"><a href="#">Pre & Post Natal Fitness</a></li>
<li class="menu"><a href="#">Senior Fitness</a></li>
<li class="menu"><a href="#">Fit Kids</a></li>
<li class="menu"><a href="#">Pre Wedding Packages</a></li>
<li class="menu"><a href="#">About Us</a></li>
<li class="menu"><a href="#">Testimonials</a></li>
<li class="menu"><a href="#">Monthly Tips</a></li>
<li class="menu"><a href="#">Impel Thanks</a></li>
<li class="menu"><a href="#">Contact Us</a></li>
</ul>
</div>
Thanks for any help guys, very much appreciated. Cheers, Jamie I have an unordered list on my page and the links continue after the /a in the webpage. The link can be clicked until the end of the line instead of just the words themselves. Also, with IE7 I noticed that the hover changes all the way until the next list item starts. Here's the link and css info: http://www.yotti.de/englishcourses.html .rccovers { position:absolute; width:650px; margin:0 0 0 150px; text-align:justify; } .rccovers a { color: #666; cursor: pointer; display:block; text-decoration:none; font-weight:700; } .rccovers a:hover { font-size:12px; background:#fff; color:#000; } Thanks for any help you can give. Hey Guys, This is my first post of what I'm sure will be many more, you have a wonderful set up here on HTMLforum.com. I redesigned our eShop last week and I'm running on Mac OS X so I do most of my development in Firefox and Safari. I spent half of my day yesterday trying to sort through this IE issue with no luck.... If you go to http://www.yumsshop.com and look at the navigation menu on the left hand side you will see the various categories and sub categories for the lower level navigation around the shop. In Firefox and Safari everything displays how it should so take a look in one of those browsers so you can see how it is supposed to look. Now switch over to Internet Explorer and Welcome to my Nightmare, lol. For whatever reason the menu is staggered and completely out of alignment. I don't know if I need to have a separate style sheet just for IE with a browser detection code or what but I'm definitely in the dark on how to get this properly working. Any help is going to be much appreciated. Thanks, Taylor Leach Yums Shoes I have a list that's unordered, and I'm having a hard time figuring out how to make it centered as a whole instead of individual lines. The list would look something like: * Item 1 - Subitem 1 - Subitem 2 * Item 2 - Subitem 1 I want to center the entire unordered list, not center each row individually. Any ideas? Hi, I have a bit of a problem. I am learning HTML and CSS, and I am trying to make a simple menu withh a background button up state and a horizontal unordered list across, with a hover effect of a new bg image over the initial ones. Please help! Thanks in advance. Hi all, Im having a problem with unordered lists. When I view it in Dreamweaver, the bullet points are small, but when I view in browser, they are huge. Ive tried adding classes to the CSS, but not sure what im doing wrong. Ive got one class that is: .bulletList { padding:0px; margin:12px; } I tried adding a different class for the actual lists: .bulletSize { font-size:12px; } But all this did was change the size of the font and not the size of the bullet point. Can anyone suggest what I could do to fix this? Thanks in advance Hello there, My site header buttons aren't showing up in Google Chrome. Design fees, web design and answers, are the only buttons that show in Chrome. The header buttons show up fine in IE, Firefox, Safari and others. Site is dreamboxdesigndotcomdotau Any help appreciated! Is there a way to align something in the dead centre of the page? here is my code so far. Code: <html>
<head>
<title>website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #BFE4FF;
}
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="801" height="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="2">
<img src="images/logo_01.jpg" width="136" height="117" alt=""></td>
<td rowspan="9">
<img src="images/spacer_03.jpg" width="30" height="600" alt=""></td>
<td>
<img src="images/spacer_04.jpg" width="611" height="20" alt=""></td>
<td rowspan="9">
<img src="images/spacer_04-05.jpg" width="23" height="600" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="7"><iframe name="iframe1" src="home.html" width=611 height=557 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></iframe></td>
<td>
<img src="images/spacer.gif" width="1" height="97" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer_01.jpg" width="136" height="43" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td>
<a href="home.html" target="iframe1"><img src="images/button_home.jpg" width="136" height="46" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td>
<a href="srchpat.html" target="iframe1"><img src="images/button_srchpat.jpg" width="136" height="47" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td>
<a href="newpat.html" target="iframe1"><img src="images/button_newpat.jpg" width="136" height="48" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td>
<a href="help.html" target="iframe1"><img src="images/button_help.jpg" width="136" height="47" alt=""></a></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/spacer_2.jpg" width="136" height="252" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="229" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer_05.jpg" width="611" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
</table>
</body>
</html>
I have managed to centre the page horizontally but i would like to also have the page vertically centred Thanks Trying to get my main content to centre in the middle of the page (vertically). Having problems... Can move the content from the top (with margin) but cannot work out how to get the whole thing to constantly float in the middle /centre. Any help hugely appreciated. thx I am having trouble aligning input fields to the bottom of the cell. Here is the link: It looks correct in Firefox, but not in Internet Explorer. Please compare the link in both browsers. http://www.sandmanmedia.net/draft/chrisbaran.html Hey guys! I seriously need your help!! I have searched everywhere and tried everything, but can't seem to get this to work. Basically I have a DIV tag with one line of text in it. The text needs to be in the middle of the DIV, vertical and horizontal. Now, it looks fine, except in IE, which makes me sad. Does anyone know a way to fix this? You can see the site here (please don't judge me, its not finished!) http://www.juicenothing.com/index.php It's the Lady Gaga text in the header part. Thanks! Jared I think it was Pegasus who gave me this code for vertical alignment: Code: <div style="vertical-align: middle;"> But it doesn't work for what I'm tryin' to use it with.. I'm tryin' to vertically align some google adsense advertisements on an image. I got the ads to show up on the image correctly, thanks to the people here.. but I can't get'em to align vertically for some reason. Are there any alternatives for vertically aligning something?? I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? Hello to all Forum members. It's my first post here. I have a problem on my site using FF 2.0 and opera. When you open http://review4dummies.com/test/index.php you see it has horizontal alignment = center, but when you click on link About Us the site will move about 10 pixels to the right and of course its centered but... huh not exactly. When you browse and click on link Contact Us its back to normal. Clicking on report-a-bug does not move site too. I was checking whole code and noticed that if i add some paragraphs and blank tables to the about-us.php file everything seems to be ok. This is driving me nuts, any help will be apreciated. PS: in ie6 everyting seems to be ok. PS2: I also noticed this bug on some sites: eg. home.pl when you click on menulink "Praca" it will move horizontaly too. eg2. nazwa.pl when you click on menulink "KONTAKT" it will move too. Anybody? Best Regards! yea, i know it makes me sound like the biggest noob ever but i am so ive put together a few pages with nothing but a list in <ul> tags and i somehow managed to make them horizontal, but now...i want it to be vertical and ive gone over every single line and not been able to work it out so i was hoping maybe you guys could help me out heres the css.... Code: body {
background-color: #e3e3db;
background-image: url(bg.gif);
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
margin: 0;
padding: 0;
}
#menu {
}
#menu li {
float: left;
height: 28px;
margin: 0 5px 0 0;
white-space: nowrap;
}
#menu li strong, #menu li a {
float: left;
height: 22px;
padding: 6px 16px 0 22px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -10px -28px;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
/* hide overflowing text */
max-width: 290px;
overflow: hidden;
text-overflow: ellipsis;
}
#menu li span {
float: left;
height: 28px;
width: 6px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -4px -28px;
}
#menu li.selected strong, #menu li.selected a {
background-position: -10px 0;
color: #000000;
font-weight: bold;
}
#menu li.selected span {
background-position: -4px 0;
}
#menu li:hover strong, #menu li:hover a {
background-position: -10px -56px;
}
#menu li:hover span {
background-position: -4px -56px;
}
#menu li.selected:hover strong, #menu li.selected:hover a {
background-position: -10px 0;
}
#menu li.selected:hover span {
background-position: -4px 0;
}
-thanks in advance I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote Hey! I have a small problem and to be honest, I don't believe there is a solution to it. I have made a table with a certain height. Now I want to put an image into this table first, aligned at the top, then I want to have a piece op text under this picture, but aligned at the very bottom of the table. It might look something like this: HTML Code: <table width="300" height="300" border="1"> <tr> <td> <img src="Foto.jpg" width="40" height="40"> <br> Text </td> </tr> </table> But I really want the text not 1 line below the image, but aligned seperately at the bottom. By the way, the position of the text has to be independant from the height of the table. I have tries everything, from css and style to span and div, but nothing worked. Maybe this is because, i think, vertical-align is not yet recognised officially. Hopefully someone can come up with a solution! Thank you, Laurens, |
|||||||