HTML - Problem Achieving Zero L/r Margin On List Items

Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page.

But when I validate my page in Dreamweaver I get some page errors that.

Here is the error:

The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict]

Now here is the code in question:
HTML Code:

<ul id="nav">
             <span class="left_links">
                   <li class="nav_items_00"><a href="index.html">Home</a></li>
                   <li class="nav_items_00"><a href="services.html">Services</a></li>
                   <li class="nav_items_00"><a href="gallery.html">Gallery</a></li>
                   <li class="nav_items_00"><a href="events.html">Events</a></li>
                   <li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li>
                   <li class="nav_items_00"><a href="about.html">About</a></li>
           </span>

The page that you can see this code in action is located at:

http://www.hsgsphoto.com

I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span.

Thank you so much for any feed back and help

John

Hello,

I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it?

I started with code something like

<div align="center">

<ul type="disc">
<li>Wine</li>
<li>Women</li>
<li>Song</li>
</ul>

</div>

This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed.

I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way?

the problem - Inbetween the nav bar and the body pic there is a gap! Iv tryed puting

"style="margin:0px; padding: 0px;" on everything, and no succes please post suggestions here

oh! and im using server side scripting to include the header and footer, in the source it is commented were it begins and ends. also in fire fox the gap is much bigger

the site - http://weddingspace.awardspace.com/

Thanks
~Oblivian

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

Hi All,
I am building a website that has traditional nested frames. I am staying away from iFrames for search engine purposes.

I am having a problem lining up a fixed background and content on both IE and Firefox. I can get everything to line up perfectly in Firefox but then IE misaligns everything. When I try to line it up in IE it still doesn't line up perfectly and then screws it up on Firefox.

The style I am using is:
body { margin: 0px 0px 0px 0px; background: url(img/content_bg.jpg) top center fixed no-repeat; background-attachment: fixed;}

It's being used on this page:
http://therestaurantdesigngroup.com/new/main.htm (Look at it in IE and FF, currently it's working in FF only)

The entire site with frames is
http://therestaurantdesigngroup.com/new/ (Look at it in IE and FF)

If you want to look at the source files download them he
http://therestaurantdesigngroup.com/new/mbaweb.zip

I am not worried about the bottom frame at this time. I want to fix main.htm first.

Thanks!
Ryan

Hi, I'm new to HTML stuff. I have a problem. I try to make a banner using table (code below). The problem is that there are margins between the table and the page that I cannot remove (even by setting margin:0px). I wish that the image in the table fill completely the banner space and there is no white margin between the images and the surrounding page. Any helps will be appreciated.

Thanks for your answer.

Jeffry

------------------------------------------------------------------------------------------------

<style type="text/css">
#middlebanner {
background: #ffffff url(./Heading-middle.jpg) repeat-x;
top: 0px;
}

#tableheader {
margin:0px;
left : 0px;
top : 0px;
right: 0px;
margin-bottom:0px;
}
</style>

<table id="tableheader" border="0" cellspacing="0" cellpadding="0" width="101.99%">

<tr>
<td>
<img src="./Heading-left.gif" border="0" >
</td>
<td id="middlebanner" width="100%">
</td>
<td>
<img src="./Heading-right.gif" border="0" >
</td>
</tr>
</table>

Hi,

Do you know the answer to this question? (I wasted a lot of time trying figure out this problem, before finally giving up.)

How do I get the book cover image to display with no left margin, while preserving the 5px right margin? It displays with no left margin in my WYSIWYG editor. But, it displays with a 5px left margin in IE and Firefox. Here is the code...

<a target="_blank" title="New Covenant Theology" href="/images/stories/book/book_cover_original_size.jpg"> <img style="border-style: none; border-width: 0px; left-margin: 0px; right-margin: 5px; title=" alt="New Covenant Theology" src="/images/150x199.jpg" width="150" align="left" height="199" /></a> 24 Reasons Why All Old Testament Laws Are Cancelled and All New Testament Laws Are for Our Obedience. See God's law in redemptive history explained simply and clearly with 7 diagrams, 20 charts, and 702 verses. Dedicated to Reformed, Covenant Theologians; Seventh Day Adventists; and other Sabbath-keepers. Read 3, free chapters from the book now: <a href="/new-covenant-theology.htm" title="New Covenant Theology"><span class="style20">New Covenant Theology</span></a></p>

And, here is the webpage...
http://www.jesussaidfollowme.org/#biblestudies

Thanks for your insight,

Greg Gibson

Hello...I posted a question about this before but it doesn't seem to have caught anyone's eye so I thought I'd try again:

http://www.trekandromeda.com/index/news.html
http://www.trekandromeda.com/index/home.css

I've got this site cross-browser compatible in Firefox, IE7, and Safari and was about ready to put it up for viewing when I discovered that Opera (which I have to consider because some of my community members use it) is reading the lists slightly bizarrely -- if you look at the page above you'll notice that the date/title things are offset oddly from the blue image in a way that they are not in either Firefox or IE.

Does anyone know why this is, and if so, does anyone know how to fix it? I really need to get this working soon, and it's the only problem I have left to solve.

Hi everyone

I am new to these forums and I am having trouble with ordered lists on one of the article on my site:

http://boostplace.com/automotives/fitting-a-motorcycle-helmet/

If you look at the list it goes from 1 to 9 then resets to zero. Please can someone help me with this?

I am using wordpress 3.2.1 as my cms

P.S. I didn't want to link the article properly as this is my first post. Sorry about having to copy an paste.

Thanks

I got a problem with the list I pasted below. I would like to get rid of the space between the last </dd> and the opening of the <ol> tag. Is their any other way I can do this so I don't have the space between the 2 elements?




<dl>

<dt>CHAPTER 1:Why HTML Rocks!</dt>

<dd>Coding isn't for pussies</dd>

<dd>What do you need to know</dd>

<dd>Common Mistakes</dd>

<ol>

<li>Eat</li>

<li>Sleep</li>

<li>Huh?</li>

</ol>

</dl>

Thanks

I recently posted this in the middle of someone else's thread, which wasn't the best thing to do, so here it is again in its own thread.

On my web site I have a drop-down menu with a "Go" button beside it. when JavaScript is enabled in Firefox and IE7, selecting an option from the list automatically takes you to that location without touching the Go button.

However, when JavaScript is disabled, the drop-down's automatic redirection is also disabled. So you need a "Go" button next to the drop-down bar. This works in Firefox, but it doesn't work in IE7, and I don't know why.

Any help would be gratefully received.

You can see the drop-down working at: http://www.historyfiles.co.uk/MainFeaturesIndex.htm

Here's the script:
<table border="0" cellpadding="0" cellspacing="0">
<form method="get" action="" tabindex="3" target="_top">
<tbody>
<tr>
<td height="16">
<select name="link" class="xbar" onchange="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value">

<option value="#">
Choose a topic
</option>

<option value="MainFeaturesIndex.htm">
British Isles
</option>

</select>&nbsp;<input value="Go" src="images/nav-gobutton.jpg" border="0" value="Go" alt="Go" type="image" class="xGo" tabindex="4" onclick="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value" width="22" height="16">
</td>
</tr>
</tbody></form>
</table>

How come when ever I had a num/bullet list and the lines break, it shows up like this:


This is a test this is a test this is a test thiestThis is a test this is a test this is a
test this is a test this is a test thiestThis is a test this is a test this is a test t
1. hiestThisis a test this is a test this is a test thiest.




The # 1. Should be before the first line Always... This is driving me crazy... I am using sharepoint designer, and it looks fine there, but when I load it in a browser, it shows up like it does above...

Hey there, I'm new to the forums, and never really asked for help on a site before, but I'm stuck.

Basically, i have a client that needs an automated way to send forms for bookings online. So far, i have created a basic HTML page that the client can import > as text in Outlook and the html gets placed into the Email. This works fine, as the user can fill out the form and reply back to us. The problem happens when i add the following code:

Code:

<select name="accomodation">
                <option value="" selected="selected">Please Select</option>
                <option value=""> -------------------------- </option>
                <option value="32">1 Bedroom Studio</option>
                <option value="41">1 Bedroom Spa</option>
                <option value="48">1 Bedroom Deluxe Spa</option>
                <option value="39">2 Bedroom Spa</option>
                <option value="42">2 Bedroom Deluxe Spa</option>
                <option value="45">3 Bedroom</option>
                <option value="46">Houses / Cottage</option>
              </select>

Now this code works when originally inserted into the email, i can make a selection and email it away, and the selection stays and is visible when opened. But once the email is sent, any further changes (a reply back, forward etc.) will break the drop down and just splatter the list in my table.

Is there any way to correct this? any other option of code i could use or a setting i can use to stop the break?

Help would be greatly appreciated.

Thanking you,

Evan.