[SOLVED] Webpage not displaying properly in Firefox

[Johnathan]

Hi all,

I have decided to create a website on my hobby of PC Television solutions. This basically grew from working at my dad's electrical store when I was younger.

I have managed to amend a site I got from OSWD and I think it looks okay. However when you try to view the site and the link in the first grey box, the pages do not display properly.

Please can anyone help me out with this regard as I am finding this all a bit frustrating ( was trying to resolve this until 3.00am yesterday but to no joy)

Would help if I posted the link to the site!

http://www.usbtvtuner.co.uk/
and http://www.usbtvtuner.co.uk/tvstick.htm

Thanks in advance. John.

[Ed]

Hi John.

First of all, validate your site - you will find that most of your problems will be solved.
Validate your CSS also.

If the errors still appear after that - then repost and we'll be sure to help!

Thanks,
Ed

[dab42pat]

Try changing your height to auto in .lbox, that might solve it in ff

[Johnathan]

thanks for the response Dab. Unfourtunately that did not do the trick. Any other ideas? I just find it really odd that it looks okay in ie6 but for some reason does not do so in firefox.

Regards. John.

[Ed]

dab42pat...we're trying to teach users better coding, shortcuts aren't the best way to do things.

Sure that might solve it, but then something else might go out out of line!
It's like dominoes, fix one problem, another one arises..usually.

If it's valid, we have a much better chance of helping you Johnathan, and not trying to figure out what is causing which problem.

Ed

[Ed]

Johnathan - it's the way things work.

Firefox has much better coding standards so it's not like Firefox is at fault, it's you.

IE6 is just plain rubbish!

YOU MUST VALIDATE IT.

Ed

[Johnathan]

Thanks Vivara for your prompt repsonses. I have added my site to the link you mentioned above and agree there are a few errors. However Vivrara the errors appear to be where I hav added a colour or bold to the page through Frontpage and not the CSS page.

I would be really grateful if you could take a look at it as I am no teckie( it took me 3-4 months to get where I am today)

Thanks in advice.
John.

[MikeHopley]

Originally Posted by Johnathan

However Vivrara the errors appear to be where I hav added a colour or bold to the page through Frontpage and not the CSS page.

Humour us. Fix the errors anyway, even if you don't believe they are causing a problem.

[Lchad]

Yes I'll try to help!

add
overflow: hidden
to .lbox

[Lchad]

Also noticed .lbox has a height of 178px. Take that out. That is probably restricting the box from becoming taller than 178px.

[Johnathan]

Thanks Lchand and everyone for your help.

Firstly happy new to you all, those of you that live in London, hope you enjoyed the fireworks at the London eye - I know I did!

Lchad I have made the changes that you recommend and you will be pleased to hear they do work

Only thing now is the text on the page has changed font and also the page does not align up now in IE ( the greyt boxes).

Sorry to be a pain but any ideas? I really would love to resolve this myslef but am honest enough to admit I am no programmer and this type of stuff is not really my strong point.

Thanks in advance. John.

[Ed]

Originally Posted by Johnathan

[...] the changes that you recommend [...]
[...] they do work [...]

[...] now [...] the text on the page has changed font and also the page does not align up [...]

Oh...didn't I warn you. One thing fixes something, while something else messes up.

Let's see exactly what I said:

Originally Posted by Vivara

[...] teach users better coding, shortcuts aren't the best way to do things.

Sure that might solve it, but then something else might go out out of line!
It's like dominoes, fix one problem, another one arises..usually. [...]

PLEASE fix your errors - it will display correctly most all of the time if you have no errors.

Some people never learn.

Ed

[Johnathan]

Sorry Vivara,

Maybe I am in the wrong place as although I find it very hard to make sense of even basic coding. I think I am asking a bit too much from forum members here, so apolgies if this is to be the case.

Kind Regards. John.

[Ed]

Okay..I'm too harsh. You're definitely not asking too much....I wanted to prove it to the "world" in general, and not just you.

Keep asking - but unless your code is valid you'll find the domino effect a lot.

Thanks,
Ed

[dab42pat]

You have to start somewhere.

You have 35 errors in your html on your home page. If you wish I can take a look at them for you and try and explain what some of the errors mean.

Pat

[Lchad]

The Good news:

The two changes we made yesterday wouldn't have any bearing on the problems of today.

The bad news:

You have a parse error in your css.
Take this out of your css (first line) and see if that corrects your font issue not displaying properly.

Code: Select all

0/* project: internet music template
   author: luka cvrk (www.solucija.com) */

That may correct the font and the font size. Which I "think" will correct your navigation issues. Your navigation maybe causing some of the problems since the font is huge. (running onto two lines instead of one)

See what that does and we can try to go from there.

[dab42pat]

I have validated your home page for you.

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 

1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-str

ict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 

xml:lang="en" lang="en">
<head>
    <meta name="author" content="Luka 

Cvrk (www.solucija.com)" />
    <meta http-equiv="content-type" 

content="text/html;charset=iso-8859-2" />
    <link rel="stylesheet" 

href="images/style.css" type="text/css" />
    <title>Internet Music</title>
</head>
<body>
    <div class="content">
        <div class="header_right">

            <div 

class="top_info">
                <div 

class="top_info_right">
                    

<p><b>You are not Logged in!</b> <a 

href="#">Log in</a>  or <a 

href="#">register</a> to start downloading 

music!</p>                    
                </div>        
            </div>
                    
            <div class="bar">

                <ul>
                    <li 

class="slogan">:</li>
                    

<li><a href="#">Links</a></li>
                    

<li><a href="#">FAQ's</a></li>
                    <li 

class="active">&nbsp;Online PC TV 

forum</li>
                    

<li><a href="#">Helpdesk</a></li>

                    

<li><a href="#">About us</a></li>
                
                </ul>
            </div>
        </div>
      <div class="logo" style="width: 

570; height: 82">
            <h1><a href="#" 

title="The best music on the 

net!">USBTVTUNER </a></h1>
            <p>independent 

review of PC TV</p>

      </div>
        
        <div class="search_field">
            <form method="post" 

action="?">
                

<p><b>Today's date: 30th December 

2007</b></p>
            </form>
        </div>
        
        <div class="newsletter">
            <p>Subscribe to my 

Newsletter!</p>

        </div>
        
        <div class="subheader">
            <p><a href="#">If 

you are looking to watch TV on your PC or 

laptop</a> 
             my website dedicated to my 

hobby of PC TV technology should hopefully  
            help you make the right choice. 

There are various options 
            currently available and it 

really depends on your particularly 
            requirements and circumstances 

as to the best option for your needs. 
            Regards. John.</p>
        </div>
        
        <div class="left">
            <div 

class="left_articles">
                <h2><a 

href="#">What are the best PC TV viewing 

solutions</a>?</h2>

                <p><a 

href="#">As I am not tied to any 

provider</a>, all my 
                reviews are as a result 

from my hobby and therefore totally 
                unbiased towards any single 

provider. As can be seen in all my 
                reviews I highlight the 

positives and negatives of each 
                solution.</p>
                <p>The 2 

main reviews below are my main favourites 

of the 
                currently available 

options. Further reviews of other 
                technologies, such as 

independently powered units can be found 
                on the right of the 

page.</p>
            </div>
                        
            <div 

class="lt"></div>
            <div class="lbox" 

style="width: 490; height: 202">
                <h2>USB 

Freeview TV Stick: <span 

class="yellow">&pound;15</span></h2>

                <div 

class="thumb" style="width: 193; height: 

248">
                    

&nbsp;<p>
                    <img  

src="../tn/tn_USB_DVB-T_Stick.jpg" 

alt="Play" width="160" height="154"/></p>
                    <p>
                    <img 

src="images/play.gif" alt="Play" width="9" 

height="9" /> 
                    USB Freeview TV Tuner 

with remote control</p>
                </div>
                    
                <p>Until 

recently to view high quality TV on a PC 

required a PCI          
                TV tuner card. Nowadays you 

can receive the same high quality Tv 
                signal from a tiny device, 

no bigger than a USb pen drive. </p>

                    
                <p>The 
                TV stick I recommend allows 

the viewing of all Freeview channels 
                ( including radio) and also 

comes complete with a annennta cable 
                for use in areas where the 

Tv signal may not be optimal. The 
                plug allows........... </p>
                    
                <p><a 

href="http://www.usbtvtuner.co.uk/tvstick.h

tm">&nbsp;To read the full review please 

click here</a></p>
            </div>
                        

        
            <div 

class="lt"></div>
            <div class="lbox" 

style="width: 489; height: 279">
            <h2>PC TV Software: 

Price &pound;30</h2>
            
            <div class="thumb">

            <img  

src="../tn/tn_gallerypicfq3.jpg" alt="Play" 

width="160" height="154"/>
            <p><img 

src="images/play.gif" alt="Play" width="9" 

height="9" /> PC 
            TV snapshot</p>
            </div>
            
            
            <p>This software is 

really easy to install and allows for the 
            viewing of over 3000plus 

channels. There is no need to wait for 
            receipt of any device as the 

channels are viewed via an Internet 
            connection. </p>
            
            
            <p>The clarity of 

the channels is very good and this</p>
            
            
            <p>&nbsp;This 

option really offers best value for anyone 

looking to watch 
            TV from the far east, Asia and 

Africa.</p>

            
            
            <p>Full a full 

review, please click here</p>
            
            </div>
        </div>    
        <div class="right">
                        
            <div 

class="rt"></div>
            <div 

class="right_articles">
                <p>
                <b>
                <img  

src="../tn/tn_encoder440.jpg" alt="Play"  

width="96" height="94"/>Lorem ipsum dolor 

sit amet</b><br />consectetuer adipiscing 

elit, sed diam nonummy nibh euismod 

tincidunt ut laoreet dolore magna aliquam 

<a href="#">erat volutpat</a>. Ut wisi enim 

ad minim veniam, quis nostrud exerci tation 

ullamcorper suscipit lobortis <a 

href="#">nisl ut aliquip ex</a>.</p>

            </div>
            <div 

class="rt"></div>
            <div 

class="right_articles">
                <p>
                <b>
                <img 

src="../tn/tn_TV_Box_Working_Without_PC.jpg

" alt="Play" width="96" height="94"/>Lorem 

ipsum dolor sit amet</b><br />consectetuer 

adipiscing elit, sed diam nonummy nibh 

euismod tincidunt ut laoreet dolore magna 

aliquam <a href="#">erat volutpat</a>. Ut 

wisi enim ad minim veniam, quis nostrud 

exerci tation ullamcorper suscipit lobortis 

<a href="#">nisl ut aliquip ex</a>.</p>

            </div>
            <div 

class="rt"></div>
            <div 

class="right_articles" style="width: 245; 

height: 114">
                <p>
                <b>
                <img  

src="../tn/tn_encoder440.jpg" alt="Play"  

width="96" height="94"/>Lorem ipsum dolor 

sit amet</b><br />consectetuer adipiscing 

elit, sed diam nonummy nibh euismod 

tincidunt ut laoreet dolore magna aliquam 

<a href="#">erat volutpat</a>. Ut wisi enim 

ad minim veniam, quis nostrud exerci tation 

ullamcorper suscipit lobortis <a 

href="#">nisl ut aliquip ex</a>.</p>

            </div>
        </div>    
        <div class="footer">
            <p><b>For a 

comparison off all review products 
            please click here</b></p>
            <p>&nbsp;</p>
            <p><a href="#">RSS 

Feed</a> | <a href="#">Contact</a> | <a 

href="#">Accessibility</a> | <a 

href="#">Products</a> | <a 

href="#">Disclaimer</a> | <a 

href="http://jigsaw.w3.org/css-validator/ch

eck/referer">CSS</a> and <a 

href="http://validator.w3.org/check?uri=ref

erer">XHTML</a><br />

            &copy; Copyright 

2006 Internet Music, Design: Luka Cvrk - <a 

href="http://www.solucija.com/" 

title="What's your 

solution?">Solucija</a></p>
        </div>
    </div>
</body>
</html>

The CSS will validate if you do what Linda (Lchad) said above.

HTML: Select all

body { 
    padding: 0; 
    margin: 0; 
    font: 0.74em Arial, Helvetica, 

sans-serif; 
    line-height: 1.5em;
    background: #fff; 
    color: #454545; 
}

a {
    color: #4A8EBC; 
    background: inherit;
}

a:hover {
    color: #C3593C;
    background: inherit;    
}

a.title {
    color: #FE6700;
    background: #FFF;
}

h1 {
    font: bold 2em "Trebuchet MS", 

Arial, Helvetica, sans-serif;
    letter-spacing: -1px; 
    padding: 2px 0 0 0px;
    margin: 0;
    color: #464548;
    background: inherit;
}

h1 a, h2 a {
    text-decoration: none;
    color: #464548;
    background: inherit;
}

h1 a:hover, h2 a:hover {
    color: #C3593C;
    background: #FFF;
}

h1 .red{
    color: #C3593C;
    background: inherit;
}


h2 { 
    margin: 0 0 5px 0; 
    padding: 0; 
    font: bold 1.5em Arial, Helvetica, 

sans-serif;
    letter-spacing: -1px;
    color: #000; 
    background: inherit;
}

h2 .yellow{
    color: #FFFCD1;
    background: inherit;
}

p {    margin: 0 0 5px 0; }

ul { 
    margin: 0; 
    padding : 0; 
    list-style : none; 
}

form { 
    margin: 0; 
}

input.search { 
    width: 145px; 
    height: 22px;
    border: none;
    background: #fff url(input.gif) 

no-repeat; 
    padding: 5px 10px 0 25px;
    color: #808080;
}

input.button {
    border: 0;
    height: 27px;
    width: 76px;
    background: #ABC43C url(button.gif) 

no-repeat;
    color: #FFF;
    font: bold 1.1em Arial, Helvetica, 

Sans-Serif;
}

input.login { 
    width: 150px;
    border: none; 
    background: url(logininput.gif); 
    padding: 4px; 
}

/* layout
   ------ */

.content { 
    margin: 10px auto;
    width: 760px; 
}

.logo {
    float: left;
    width: 180px;
    padding: 10px 0 11px 10px;
}

.header_right {
    float: right;
    width: 550px;
    height: 72px;
}

.logo p {
    font-size: 0.9em;
    color: #808080;
    padding: 0 0 0 7px;
    background: inherit;
}


.top_info {
    width: 540px;
    margin: 12px 0 5px 0;
    padding: 0 5px 5px 0;
    text-align: right;
    background: #FFF url(dot.gif) 

repeat-x bottom;
    color: #444;
}
    

.slogan {
    text-align: right;
    width: 160px;
}


.bar { 
    text-align: right;
    font-size: 1.1em;
    height: 30px; 
}

    .bar li { 
        
        padding: 0px 10px 8px 10px;
        color: #808080;
        background: #FFF;
        display: inline;
    }
    
    .bar li.active { 
        background: #FFF 

url(bar.gif) no-repeat center bottom; 
        color: #C3593C;
        font-weight: bold; 
        padding-bottom: 8px; 
    }

    .bar a { 
        font-weight: bold;
        color: #4A8EBC; 
        background: inherit;    
    } 

.search_field { 
    text-align: right;
    float: right;
    width: 540px;
    height: 38px;
    background: #464548 

url(searchbg.gif) no-repeat top right; 
    color: #000;
    clear: both;
    padding: 10px 10px 0 0;
}

.grey {
    font-size: 1.2em;
    font-weight: bold;
    color: #ccc;
    background: inherit;
    
}

.search {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFF;
    background: inherit;    
}

.newsletter {
    float: left;
    height: 33px;
    padding: 15px 0 0 15px;
    width: 192px;
    background: #6E6E6E 

url(newsletterbg.gif) no-repeat;
    color: #FFF;
    margin: 0 0 3px 0;
}

.subheader {
    clear: both;
    margin: 3px 0 10px 0;
    padding: 8px;
    background: #f4f4f4;
    color: #808080;
    border-bottom: 1px solid #ccc;
}

/* left side
   --------- */

.left {
    float: left;
    width: 490px;
    margin: 0 0 10px 0;
}
    .left_articles {
        margin: 0 0 15px 0;
        padding: 0 0 0 10px;
    }

    .lt {
        height: 10px;
        background: #6E6E6E 

url(lt.gif) no-repeat;
        color: #FFF;
    }
    
    .lbox {
        color: #eee;
        padding: 3px 12px;
        margin: 0 0 15px 0;
        overflow:hidden;        
        background: #6E6E6E 

url(lb.gif) no-repeat bottom left;
        height: auto;
    }
    
    .lbox a {
        color: #FFFCD1;
        background: inherit;
    }
    
    .lbox h2 {
        color: #FFF;
        background: #6E6E6E;
    }
    
    
.thumb {
    float: left;
    width: 150px;
    border: 1px solid #d4d4d4;
    color: #fff;
    background: #6e6e6e;
    margin: 0 15px 15px 0;
    padding: 5px;
}

.thumb p { margin: 0; padding: 3px; color: 

#FFF; background: #6e6e6e; }
    
/* right side
   ---------- */
        
.right {
    float: right;
    width: 245px;
    margin: 0 0 10px 0;
}

.right a {
    color: #FFFCD1;
    background: inherit;
}

        
    .rt {
        background: #C85E35 

url(rt.gif) no-repeat;
        color: #FFF;
        height: 7px;
    }
        
    .right_articles {
        font-size: 0.9em;
        background: #C85E35 

url(rb.gif) no-repeat bottom;
        color: #FEE1D5;
        padding: 4px 8px;    
        margin: 0 0 10px 0;
    }
    
            
.image {
    float: left;
    margin: 0 9px 3px 0;
}

/* footer
   ------ */

.footer { 
    clear: both; 
    text-align: center;
    line-height: 1.8em;
    color: #808080;
    background: #FFF url(dot.gif) 

repeat-x;
    padding: 8px 0;
}

.footer a {
    color: #C3593C;
    background: inherit;
}

Take a look at the above code and try and apply the changes to your other pages.

Hope this helps

Pat

[Ed]

I give up.

You did it for him? He's definitely not going to learn this way.

Ed

[dab42pat]

Ed

as Jonathon pointed out in an earlier post he is not very competent with coding.

I have simply corrected one page of many he will have to code, hopefully he can look at the page that validates and learn from that.

Pat

[Johnathan]

Hi all,

Special thanks to Lchad, dab42pate and Vivara,

I really do apprecaite all your help in this matter and you will be pleased to know that I have made the recommended changes and the homepage is now strict XMTML

This Page Is Valid XHTML 1.0 Strict!

Vivara I do really believe in education but if I am honest programming appears to be double dutch to me. To be honest if it had been left to me to make the changes I think I would have had to have given up due to share frustration. Before coming to this forum for help I even asked a couple of 'teckie' blokes at work to no avail.

Dab42pat, I have also made the changes to the second page but get 28 validation erros. To make the changes I cut and paste the second bit of code on your post- was that the correct thing to do?

Also on Internet explore the grey boxes do not appear as they should, i.e, the border with the thumnails is out of the grey box. Any ideas please?

Best Regards. Pari.