14 replies [Last post]
ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

Someone pointed out that if you reduce the size of the browser, the menu starts to wrap.

http://carfaro.com/index.php?section=1&sub=1
http://carfaro.com/media/newstyle1.css

I have a really big screen, but I noticed even if I have it lower than 1024, it begins to wrap on me. There's a scroll bar, so I would assume it wouldn't wrap at all.

I have NO idea why, is it because my menu is too wide? I got the menu code from working with one of the admins here, but I'm not sure what's causing the wrap.

kilavasun
Offline
Regular
Brasil
Last seen: 13 years 1 week ago
Brasil
Timezone: GMT-3
Joined: 2009-03-23
Posts: 17
Points: 0

I see...

Hello ravensensei!

Can you paste the index source code (or, at least, the bit of the code with the menu)? I'm at work, and i don't know how but my IE doesn't want to show me your source code (and FF doesn't work here). I'll try to help you out later in home ok?

Regards,
kilavasun

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You have some rather

You have some rather critical markup errors that must be resolved as there is no real means of knowing how the browsers are correcting the errors and how css rules will be applied to this mal-formed but corrected markup.

Things may then work as expected, post back when the errors are fixed.

If things are still not working as expected perhaps that admin might step back in to help out further? it wasn't me was it Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 45 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Set a width to this

Set a width to this section:

.menu ul {  list-style-type: none; background-position:center; font-family:Arial, Georgia; width: 800px;}

Right now, the list doesn't know how long it should be, so it is stacking next to itself as long as needed. With no width set in place, it is collapsing when the window shrinks.

Just throw values at it until you find one that works.. I used 800px (See code sample), and it worked just fine!

EDIT:
I was testing in 100px increments, and 700px forced 2 links to wrap. You might be able to go lower than 800px.. I didn't try to get it right down to the pixel. Smile

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

but...

there's only 178 validation errors!!! Smile I'm not sure Hugo, but I think it might have been Smile

I'll check it out. See if this looks familiar.

<div id="header"> 
  <div id="header-inner"> 
    <div id="header-top"><!-- Top Repeating Image --></div> 
    <h1>Carfaro, Inc Logo</h1> 
    <h2 id="headerLogoTagLine">The Standard in Railing and Fencing</h2> 
    <h2 id="headerSpecWiz">spec wiz pic</h2> 
    <h2 id="headerPhone">call toll free 1-800-123-4567</h2> 
 
<div class="menu"> 
<ul> 
	<li id='active'><a href="index.php?section=1&sub=1" >home<!--[if IE 7]><!--></a><!--<![endif]--> 
	<!--[if lte IE 6]><table><tr><td><![endif]--> 
		<ul> 
			<!--li><a href="index.php?section=1&sub=3">Specifications</a></li--> 
			<li><a href="http://www.arcat.com/sd/clients/carfaro.html" target="_blank">Specifications</a></li> 
			<li><a href="index.php?section=1&sub=6">Contact Us</a></li> 
			<li><a href="index.php?section=1&sub=7">Links</a></li> 
		</ul> 
	<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li> 
	<li ><a href="index.php?section=2" >gallery<!--[if IE 7]><!--></a><!--<![endif]--> 
	<!--[if lte IE 6]><table><tr><td><![endif]--> 
 
	<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li> 
	<li  ><a href="index.php?section=3">railings<!--[if IE 7]><!--></a><!--<![endif]--> 
	<!--[if lte IE 6]><table><tr><td><![endif]--> 
 
<ul> 
<li><a href="index.php?section=3&sub=1">Channelpipe<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="index.php?section=3&sub=2" title="">Classic<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
 
</li> 
<li><a href="index.php?section=3&sub=3" title="">Classic II<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="index.php?section=3&sub=4" title="">Colonial<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
 
</li> 
<li><a href="index.php?section=3&sub=5" title="">Standard<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
 
<li><a href="index.php?section=3&sub=6" title="">Traditional<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
 
</li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li ><a href="index.php?section=4&sub=1">readyrailing<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
 
<li ><a href="index.php?section=5">fencing & gates<!--[if IE 7]><!--></a><!--<![endif]--> 
 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="index.php?section=5&sub=1" >Fencing<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
 
<li><a href="index.php?section=5&sub=2">Gates<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="index.php?section=5&sub=3" >Hardware<!--[if IE 7]><!--></a><!--<![endif]--> 
 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li ><a href="index.php?section=9">options & upgrades<!--[if IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul> 
<li><a href="index.php?section=9&sub=1">Standard Colors</a></li> 
 
<li><a href="index.php?section=9&sub=2">Staggered Picket</a></li> 
 
<li><a href="index.php?section=9&sub=4">Continuous</a></li> 
<li><a href="index.php?section=9&sub=6">Double Continuous</a></li> 
<li><a href="index.php?section=9&sub=8">Picket Castings</a></li> 
<li><a href="index.php?section=9&sub=9">Full Castings</a></li> 
<li><a href="index.php?section=9&sub=10">Infill Panels</a></li> 
 
<li><a href="index.php?section=9&sub=11">Waterjet Design</a></li> 
<li><a href="index.php?section=9&sub=12">Bowed Fence</a></li> 
<li><a href="index.php?section=9&sub=13">Comm Top Rail Profile</a></li> 
 
<li><a href="index.php?section=9&sub=14">Rail Picket</a></li> 
<li><a href="index.php?section=9&sub=15">Post Caps</a></li> 
<li><a href="index.php?section=9&sub=16">Fence Picket</a></li> 
 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li><a href="#">specifications</a><!--[if IE 7]><!--><!--<![endif]--> 
	<!--[if lte IE 6]><table><tr><td><![endif]--> 
		<ul> 
			<li><a href="http://www.arcat.com/sd/clients/carfaro.html" target="_blank">Arcat specifications</a></li> 
			<li><a href="http://arcat.com/specwizard/05520car/index.htm" target="_blank">Arcat SpecWizard</a></li> 
		</ul> 
	<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li> 
<li><a href="/members/">member section</a><!--[if IE 7]><!--><!--<![endif]--> 
	<!--[if lte IE 6]><table><tr><td><![endif]--> 
	<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
	</li> 
</ul> 
  </div> 
  </div> 

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 45 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I threw a solution at you

I threw a solution at you above.. we were posting at the same time, so just wanted to make sure you see my above post lol. :thumbsup:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I have stated my loathing of

I have stated my loathing of this CC menu approach in the past, I really dislike it and have been amazed at it's take up by people especially as the author only ever originally intended it as proof of concept and initially stated it wasn't for real world production.

Right now it is important to tackle those errors I would have overlooked less serious ones but some of these are likely to cause browsers to display unpredictable results, hence my reticence to provide solutions based on broken code.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 45 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hugo wrote:(snip).. hence my

Hugo wrote:

(snip).. hence my reticence to provide solutions based on broken code.

Those errors definitely do need to be taken care of.

I figured that the width would need to be added even on 100% validated code, so that's why I jumped in with that. I actually ran into that wrapping menu issue earlier today, when playing around a design of my own that validated completely.

That's the only reason I added a solution.. I didn't actually look at the errors, or try to validate the site (you guys had already pointed that out).. but I assumed that the validation errors were not causing the menu wrapping issue because even with those errors, the menu is actually functioning correctly.

Do take care of those errors first.. once they are fixed, then try my suggestion if it still wraps!

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

Hugo wrote:I have stated my

Hugo wrote:

I have stated my loathing of this CC menu approach in the past, I really dislike it and have been amazed at it's take up by people especially as the author only ever originally intended it as proof of concept and initially stated it wasn't for real world production.

Right now it is important to tackle those errors I would have overlooked less serious ones but some of these are likely to cause browsers to display unpredictable results, hence my reticence to provide solutions based on broken code.

I am so more than ready to bow down before your wisdom, I am such a CSS newbie it's not even funny.

I have gotten it down to ~128 so far, but It'll jump back up if I change pages. The way I set it up was to have an index page that uses php to populate an inner content div, and I know there's major problems with the other pages that fill in. I didn't know it was a no no not to have an alt in an img tag. Learn something new every day Smile

Titan, I'm curious if you see the same problem or if using your solution solved it. I put in a width of 800 and it seems to not allow wrapping now.

I WILL however go back and start attacking those validation errors, I've already knocked off about 30 or so.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 45 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

I thought that the only

I thought that the only problem that we were trying to solve was to get your menu to stop wrapping? If it stops after adding the 800px width to the #main ul.. isn't that what you were trying to accomplish?

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

yes, but

I would like to clean up the site so that I'm doing things properly.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Titan793 wrote:I thought

Titan793 wrote:

I thought that the only problem that we were trying to solve was to get your menu to stop wrapping? If it stops after adding the 800px width to the #main ul.. isn't that what you were trying to accomplish?

Titan sometimes what is perceived or presented as the problem is not necessarily the sole issue, I don't mention mal-formed markup simply to be snooty or a pain in the butt, there is a real and pressing issue that must be addressed first before anything else, I wanted to see a clean page free of errors and then look at why the layout behaved in an untoward manner.

As for the menu approach using the table elements, it's a personal dislike I can present good reasoned argument why it shouldn't be used , but I'm not saying it musn't be used, it works in the layout then that's ok

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

IE8

IT seems to solve the problem in everything except IE8.

Any suggestions on a menu to use instead of the one I've got? Still going through and removing validation errors.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 45 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Hugo wrote:Titan793 wrote:I

Hugo wrote:
Titan793 wrote:

I thought that the only problem that we were trying to solve was to get your menu to stop wrapping? If it stops after adding the 800px width to the #main ul.. isn't that what you were trying to accomplish?

Titan sometimes what is perceived or presented as the problem is not necessarily the sole issue, I don't mention mal-formed markup simply to be snooty or a pain in the butt, there is a real and pressing issue that must be addressed first before anything else, I wanted to see a clean page free of errors and then look at why the layout behaved in an untoward manner.

As for the menu approach using the table elements, it's a personal dislike I can present good reasoned argument why it shouldn't be used , but I'm not saying it musn't be used, it works in the layout then that's ok

Oh yea, I agree with the table elements menu approach.. I'm not a fan of that either.

I know what you're saying as far as making sure everything validates up first, and bringing it up definitely isn't being snooty or a pain in the butt. It's excellent advice, and should really be the first thing that anyone does.

I just literally ran into that same issue 2-3 hours prior to seeing this post (in a project of my own that validated 100%), and figured that it wouldn't be a bad idea to add in there regardless.

Trust me, I'm not trying to step on your toes here.. I'm sure you (and several others on this site) know more than I do when it comes to CSS! Smile

ravensensei
ravensensei's picture
Offline
Enthusiast
Last seen: 13 years 25 weeks ago
Timezone: GMT-4
Joined: 2007-02-25
Posts: 92
Points: 0

still going to make fixes

edit:4/6 - looking thru the validation errors and talked to the client and they want to redesign things. Is there a solid dropdown menu that is standards compliant? I'm pushing to start from scratch. Smile For that matter, is there a css template you would recommend? The one I have now is thrown together pieces of sloppy code. I'd like to do this the right way from the beginning.
--------------------------------------------------------------------------

to cut out the validation errors, but is there a dropdown menu that ya'll would suggest? I kind of need to have an image in the background so it looks similar, they were pretty particular that the bar look like that.

Nothing would make me happier than to ditch that scheme, it's confusing as hell and breaks regularly.

I'm assuming that there are css compliant dropdown menu setups?