All gone wrong. Options

[bigginge]

I thought I was getting the hang of this stuff, html & css, but apparently not. I've done a site for a couple of friends which looks fine on my computer screen but when I view it on my android phone, and my son's iPhone, everything's all over the place.
The first page of the site is at http://www.mbgroundworks.co.uk/test/ I can't figure out why the bottom block of text is larger than the main body of text when they're both the same class, i.e. 'bodytxt' Then when viewed in portrait the lower text runs around the main text.
The css is:
[/code]
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a:link, a:visited {
display: block;
width: 232px;
font-weight: bold;
color: #000000;
background-color: #CCCCCC;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}

a:hover, a:active {
background-color: #FF0000;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
}

#active a
{
display: block;
width: 232px;
font-weight: bold;
color: #FFFFFF;
background-color: #FF0000;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}



#maintxt {
width: 500px;
margin-top: 30px;
margin-left: 50px;
float: left;
}
body {
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;

}
#redline {
background-color: #F00;
height: 6px;
width: 100%;
}
#navbar {
background-color: #F00;
height: 28px;
width: 960px;
margin-top: 120px;
}
#container {
width: 960px;
background-color: #FFF;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
border: thin solid #F00;
min-height:100%;

}
#logo {
float: left;
height: 100px;
width: 180px;
margin: 10px;
z-index: 20;
position: relative;
}
#italtxt {
float: right;
height: 30px;
width: 500px;
margin-top: 80px;
margin-left: auto;
margin-right: 20px;
position: relative;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 30px;
font-style: italic;
text-align: right;
}
.italhead {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
color: #000;
text-align: left;
z-index: 10;
}
#topbg {
background-color: #FFF;
height: 120px;
width: 960px;
z-index: 0;
position: absolute;
background-image: url(images/blueprint.jpg);

}
#introtxt {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
color: #000;
text-align: left;
}
.bodytxt {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
}

#footer {
height: 40px;
width: 960px;
margin-top: 40px;
background-color: #F00;

}
.foottxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
color: #FFF;
text-align: center;
line-height: 40px;


}
.galltxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #000;
text-align: center;
}
.quotetxt {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
color: #000;
line-height: 18px;
text-align: left;
}
[/code]

Very grateful for any help you can give.

[pandy]

Have you changed something? Looks the same on my Android as on my PC.

[bigginge]

Have you changed something? Looks the same on my Android as on my PC.

That's odd, it looks like this on mine:


I'm at a loss now!

[pandy]

Strange. Afraid I don't know much about mobile browsers and versions of Android or mobile in general. I use the default browser, the icon just says "Internet". I'm on Android 4.3 it says.

I think Frederiek is a little into this. She'll be around sooner or later.

[bigginge]

Strange. Afraid I don't know much about mobile browsers and versions of Android or mobile in general. I use the default browser, the icon just says "Internet". I'm on Android 4.3 it says.

I think Frederiek is a little into this. She'll be around sooner or later.

Thanks anyway. Baby sitting grandchildren now, looks fine on their Ipad.

[Christian J]

I've also seen strange quirks in various mobile browsers, but it could also be due to any of these validator errors: http://validator.w3.org/check?uri=http%3A%...ine&group=0

[Christian J]

I use the default browser, the icon just says "Internet".

I think it's Chromium-based (or something related).

[pandy]

Sure? Odd since they've installed Chrome too.

Yeah, fixing errors is always the starting point.

[Christian J]

Sure? Odd since they've installed Chrome too.

According to http://en.wikipedia.org/wiki/Android_Browser it's Blink-based.

[Frederiek]

I wouldn't know why I'd be more into this kind of thing. I actually don't test any given URLs here on mobile devices, just in Safari on desktop, using a Responsive design bookmarklet ( http://www.benjaminkeen.com/open-source-pr...gn-bookmarklet/ ).

The OP's URL doesn't shrink at most sizes, as nothing seems to have been done for smaller devices. It only works on desktop and on a 1024 x 768 (tablet - landscape).

Besides fixing the errors, I'd use media-queries. See http://www.d.umn.edu/itss/training/online/...ign/css.html#mq .

The bigger font-size for the last paragraph in the screenshot seems weird to me, though.

[Darin McGrew]

With the unterminated comment that starts on line 8, a lot depends on how any given browser recovers from that unterminated comment. I wouldn't be surprised to find a browser that displays a blank page.

[pandy]

If there is a broken comment, that's probably it.

Frederiek, I've just got that impression. You often answer mobile questions.

[Frederiek]

Nah, I then mostly post the media query link.

[bigginge]

Thanks to you all for your comments and taking the time to reply. I've tried one or two things with no luck, even created a new class for the type at the bottom, it was still showing up large.
Today I shall mow the lawn then sit down and read up on Media Queries then tomorrow I'll start from scratch, with the same design and hope to get a better result.
I may be back.

[Christian J]

Sure? Odd since they've installed Chrome too.

According to http://en.wikipedia.org/wiki/Android_Browser it's Blink-based.

Seems it's an epidemic: http://www.quirksmode.org/blog/archives/20...e_continue.html

[pandy]

I can't keep track of all browsers and their versions anymore. I miss the days of IE4 and Netscape.

And what happened with ? Use a browser that's a fraction of a version old and you have to put up with broken pages.

[bigginge]

I put the site together again from scratch, adding a couple of things suggested but also simplifying it - e.g. one column of text - and sent a link to the clients. They're really happy with it, going to send pics and text to replace borrowed pics and idiot text, so thanks again for all your help.

[Frederiek]

Now you only should validate your HTML and CSS and fix the few errors found.

- http://validator.w3.org
- http://jigsaw.w3.org/css-validator/

Use the simple HTML5 meta tag for the charset:
<meta charset="utf-8">
See http://html5doctor.com/element-index/#meta and the included snippet.