Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Nav bar is cut off

Posted by: rosanne5454 Jul 20 2012, 10:55 PM

I am stumped. When I view my temp. file in Firefox it displays the full Nav Bar but when I view in
Google Chrome it cuts off the end of the "Contact" button. I have spent so much time on trying to fix
this to no avail....I have also tried Firebug with no luck.

Can anyone shed some light on this? I am very new at this so would appreciate any input...

Posted by: rosanne5454 Jul 21 2012, 12:02 AM

http://360webmedia.com/indexjuly9.html

Posted by: pandy Jul 21 2012, 07:13 AM

I don't have Chrome, but I have Iron, which should be the same, and I can't see that the button is cut off. Unless it's cut off in my version of gecko too, but I don't think so.

Anyway, you should fix the errors. Some of them are rather strange.
http://validator.w3.org/check?uri=http%3A%2F%2F360webmedia.com%2Findexjuly9.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Don't know about the CSS. The validator can't access some of your CSS files.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2F360webmedia.com%2Findexjuly9.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Posted by: rosanne5454 Jul 21 2012, 09:57 PM

Thank you for your suggestion. I think the problem might me in Chrome only because it's ok in Firefox. I have looked at the validator report and I have no idea how to fix many of the errors. I have a membership with a Template company and since I am so new to this, I am not sure if I have made the errors or if they were already on the Template....Can you suggest the best way to fix the errors without making my template invalid?

Posted by: pandy Jul 22 2012, 06:32 AM

I know even less than you about your template, but I can try to explain the errors.

CODE

Line 34, Column 6: An head start tag seen but an element of the same type was already open.

<head>

The embedded style sheet is placed before the start tag for HEAD. It must be inside HEAD. Both start and end tag for HEAD are optional in HTML. Not sure about HTML5, but the validator seems to think so because it decides a start tag for HEAD is implied before the style block (because the style block must be inside HEAD). Hence it sees the start tag you really have as a second one.

CODE

Line 332, Column 31: < at the start of an unquoted attribute value. Probable cause: Missing > immediately before.

<li class=<span>   </li>

That's just crazy markup and it's repeated several times. My guess is that part of the start tag for LI has been deleted by accident and then it has been copy pasted several times. It probably looked something like this to start with.

HTML

CODE

Error Line 361, Column 24: The align attribute on the h2 element is obsolete. Use CSS instead.

<h2 align="center">LISTEN TO SPIRIT MUSIC</h2>

Pretty self-explanatory. You can't use presentational markup like that in (X)HTML Strict or HTML5. If you use (X)HTML 4.01 Transitional instead you can. The same goes for the other errors you get for obsolete markup.

CODE

Line 375, Column 54: & did not start a character reference. (& probably should have been escaped as &.)

�aram name="flashvars" value="showtime=true&autoreplay=true&xml=playlist.xml" />

Again self-explanatory. Do as the validator says and replace the ampersand with its enity. Yes, it will still work, nothing will break.

CODE

Error Line 397, Column 99: Element object is missing one or more of the following attributes: data, type.

�object classid="" codebase="" width="60" height="100" id="main" align="middle">

Some attributes are required.

Posted by: rosanne5454 Jul 22 2012, 10:07 AM

Wow. You have been very helpful. Thank you very much! What I realize is, that I have a lot to learn!

Posted by: pandy Jul 22 2012, 04:46 PM

Well, you've started now.

Forgot to say that instead of the old style presentational markup you should, of course, use CSS.

Posted by: rosanne5454 Jul 23 2012, 09:53 AM

Thank you. I wonder if I can ask you one more thing. It has to do with the errors I have received....Line 324 to 338 is my Contact Box.
At one time the contact box was part of the template in Dreamweaver but I have since placed an image in "contactBox" instead. I shouldn't have done this but I then deleted all the code in between the <li> <span> because I I tried outright delete all the <li> <span> this shrank my contact box. Is there some coding I can use to replace the <li> <span> and still keep the contact box at it's true size? Here is the coding:


<div class="contactBox">
<div class="top">
<div class="bottom">
<h3></h3>
<ul>
<li><span>  </span> </li>
<li><span>   </span></li>
<li class=<span>   </li>
<li class=<span>                 </li>
<li class=<span>                  <span> </span> </li>
</ul>
</div>
</div>
</div>

</div>

Posted by: pandy Jul 23 2012, 02:14 PM

Remove everything inside .contactBox and style it with the same width and hight as the background image.

HTML

That said, I don't think using an image is a good solution. The text on the image can't be searched and it can't be copied. I for one often copy contact details from web sites. An inline image would be a little better because you can provide alt text, but it still can't be copied.

Posted by: rosanne5454 Jul 23 2012, 09:18 PM

Thank you so much for your help & your kindness. You have been a tremendous help. I will try this out. I hope I can return the favour & help you out some day...

Posted by: pandy Jul 23 2012, 10:56 PM

No problem. You'll help someone else somewhere. It all goes around.