The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Nav bar is cut off
rosanne5454
post Jul 20 2012, 10:55 PM
Post #1





Group: Members
Posts: 9
Joined: 25-June 12
Member No.: 17,326



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...

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rosanne5454
post Jul 21 2012, 12:02 AM
Post #2





Group: Members
Posts: 9
Joined: 25-June 12
Member No.: 17,326



My Webpage

This post has been edited by rosanne5454: Jul 21 2012, 12:04 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 21 2012, 07:13 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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%...ine&group=0

Don't know about the CSS. The validator can't access some of your CSS files.
http://jigsaw.w3.org/css-validator/validat...ng=&lang=en
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rosanne5454
post Jul 21 2012, 09:57 PM
Post #4





Group: Members
Posts: 9
Joined: 25-June 12
Member No.: 17,326



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 22 2012, 06:32 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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> &nbsp; </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
<li class="WHATEVER"><span> &nbsp; </li>


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 &amp;.)

…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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rosanne5454
post Jul 22 2012, 10:07 AM
Post #6





Group: Members
Posts: 9
Joined: 25-June 12
Member No.: 17,326



Wow. You have been very helpful. Thank you very much! What I realize is, that I have a lot to learn!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 22 2012, 04:46 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



Well, you've started now. wink.gif

Forgot to say that instead of the old style presentational markup you should, of course, use CSS.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rosanne5454
post Jul 23 2012, 09:53 AM
Post #8





Group: Members
Posts: 9
Joined: 25-June 12
Member No.: 17,326



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:

<!-- / CONTACT BOX \ -->
<div class="contactBox">
<div class="top">
<div class="bottom">
<h3></h3>
<ul>
<li><span> &nbsp;</span> </li>
<li><span> &nbsp; </span></li>
<li class=<span> &nbsp; </li>
<li class=<span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>
<li class=<span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <span> </span> </li>
</ul>
</div>
</div>
</div>
<!-- / CONTACT BOX \ -->
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 23 2012, 02:14 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



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

HTML
<div class="contactBox">
<!-- ALL GONE! -->
</div>


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rosanne5454
post Jul 23 2012, 09:18 PM
Post #10





Group: Members
Posts: 9
Joined: 25-June 12
Member No.: 17,326



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 23 2012, 10:56 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6



No problem. You'll help someone else somewhere. It all goes around. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th April 2024 - 04:45 PM