Hello,
The page looks as expected on desktop browsers e.g. Firefox, etc. The
problem is with display on mobile devices.
Google mobile test yields the following:-
- content wider than screen
- text too small to read
- clickable elements too small to read
When displayed correctly, the dark background of the BODY" of the page
should appear only as a thin frame, with the white background of the
"mainFrame" div appearing as central with all contents inside.
What changes should be made to the css to allow correct display on
noth desktop and mobile devices browsers?
The page with the internal css is below.
Please help.
David
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir='ltr'>
<head>
<style>
html, body{height:100%;text-align: center;background:#646464;}
body{padding:0px;margin:0px; text-align: center;}
.mainFrame{
width: auto;
min-height:100%;
height: 100%;
background: white;
border: 5px solid #CCCCCC;
margin:auto;
}
html>body .mainFrame {width:auto; height: auto;}
th{
text-align: center;
padding: 9px 0px 9px 0px;
background: #E8E8FF;
font: bold 12px TAHOMA;
color: #404040;
}
td {
font: 11px Tahoma;
background: #DFEFFF;
padding: 8px 5px 8px 3px;
}
td.blank{
padding: 12px 0px;
background: WHITE;
}
.logosmallContainer {
position: relative;
width: 960px;
top: 22px;
}
.logosmallContainer1 {
position: relative;
width: 720px;
top: 22px;
}
.logosmall {
float:right;
}
.jobtabs{
position: relative;
top:40px;
width: 720px;
}
.upperTabs{
position: relative;
font-size: 12px;
width: 720px;
clear:both;
}
.uprTabs {
width:120px;
text-align:center;
padding:0px;
font: 12px tahoma;
float:right;
}
.uprTabs a {
width:120px;
height: 30px;
line-height:30px;
background-color: #EEEEEE;
text-decoration: none;
border-top: 1px #F5F5F5 solid;
border-left: 1px #F5F5F5 solid;
border-bottom: 1px #F5F5F5 solid;
border-right: 1px #F5F5F5 solid;
}
html>body .uprTabs a {width:118px; display:table; }
.uprTabs a:hover{
background-color: #C3E2DB;
text-decoration: none;
border-top: 1px solid #31557f;
border-left: 1px solid #31557f;
border-bottom: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
}
.lowerTabs{
position: relative;
font-size: 12px;
width: 720px;
border-top: solid #007FC0 5px;
clear:both;
}
html>body .lowrTabs a {width:118px; display:table;}
.lowrTabs {
width:120px;
background-color: #EEEEEE;
text-decoration: none;
text-align:center;
font: 12px tahoma;
float:right;
height: 27px;
line-height:27px;
}
.lowrTabs a {
width:120px;
height: 25px;
line-height:25px;
background-color: #EEEEEE;
text-decoration: none;
border-top: 1px #F5F5F5 solid;
border-left: 1px #F5F5F5 solid;
border-bottom: 1px #F5F5F5 solid;
border-right: 1px #F5F5F5 solid;
float:right;
}
.lowrTabs a:hover{
background-color: #C3E2DB;
text-decoration: none;
border-top: 1px #31557f solid;
border-left: 1px #31557f solid;
border-bottom: 1px #E6E6E6 solid;
border-right: 1px #E6E6E6 solid;
}
.vMsg2 {
font: bold 22px arial;
position: relative;
top: 78px;
width: 720px;
text-align: center;
direction:rtl;
clear:both;
}
.vMain {
position: relative;
top: 113px;
width:620px;
direction:rtl;
clear:both;
}
.vMainJobs {
position: relative;
top: 30px;
width:620px;
direction:rtl;
clear:both;
}
.pgn1 {
width: 330px;
top:30px;
position: relative;
}
html>body .pgn1 {display:table;}
.pgnbx {
width: 30px;
height: 20px;
line-height:20px;
float:right;
text-decoration: none;
text-align:center;
}
html>body .pgnbx a {display:table;}
.pgnbx a{
width: 30px;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
background: #FFF;
background: #CDF6ED;
}
.pgnbx a:hover{
width: 30px;
background: #B3E1D7;
border-color: #fff #ccc;
text-decoration: none;
}
.mainXJobs {
height:55px;
clear:both;
}
.ad728Y{
position: relative;
width:728px;
border-top: double thick #D3D3D3;
border-bottom: double thick #D3D3D3;
}
</style>
</head>
<body topmargin='0' leftmargin='0' >
<div class="mainFrame" align="center">
<div class="logosmallContainer1">
<div class="logosmall"><img border="0" src="media/small.jpg"
alt="logo"></div>
<DIV class=adtop2>
</div>
</div>
<div class="jobtabs">
<div class="upperTabs">
<DIV class=uprTabs><A href="?Category6">Category 6</DIV>
<DIV class=uprTabs><A href="?Category5">Category 5</A></DIV>
<DIV class=uprTabs><A href="?Category4">Category 4</A></DIV>
<DIV class=uprTabs><A href="?Category3">Category 3</A></DIV>
<DIV class=uprTabs><a href="?Category2"> Category 2</a></DIV>
<DIV class=uprTabs><A href="?Category1">Category 1</A></DIV>
</div>
<div class ="lowerTabs">
<DIV class=lowrTabs><A href="?Category7">Category 7</A></DIV>
<DIV class=lowrTabs><A href="?Category8">Category 8</A></DIV>
<DIV class=lowrTabs><A href="?Category9">Category 9</A></DIV>
<DIV class=lowrTabs><A href="?Category10">Category 10</A></DIV>
<DIV class=lowrTabs><a href="?Category11"> Category 11</a></DIV>
<DIV class=lowrTabs><A href="?Category12">Category 12</a></DIV>
</div>
</div>
<div class='vMsg2'><H1>
GENERAL LIST
</H1></div>
<br><br><br><br><br><div class="ad300" id="ad"></div><div
class='vMainJobs' dir='ltr'> <table border='0' width='100%' dir='ltr'
cellspacing='1'>
<tr>
<th width='100%' colspan='2'>DETAILS</th>
</tr>
<tr>
<td width='18%'height='18' valign='top'>LOCATION </td>
<td height='18'>LONDON</td>
</tr>
<tr>
<td width='18%'height='18' valign='top'>LINK</td>
<td height='18'><a
href='https://www.mydomain.com'>https://www.mydomain.com</a></td>
</tr>
</table>
<table border='0'>
<tr>
<td class='blank'>
<a href='#top'>top of page</a>
</td>
</tr>
</table>
</div>
<div class="pgn1">
<div class='pgnbx'>
<a href='?jpage=2'>2</a>
</div>
<div class='pgnbx'>
<a href='?page=3'>3</a>
</div>
<div class='pgnbx'>
<a href='?jpage=4'>4</a>
</div>
<div class='pgnbx'>
<a href='?page=5'>5</a>
</div>
<div class='pgnbx'>
<a href='?jpage=6'>6</a>
</div>
<div class='pgnbx'>
<a href='?page=7'>7</a>
</div>
<div class='pgnbx'>
<a href='?jpage=8'>8</a>
</div>
<div class='pgnbx'>
<a href='?page=9'>9</a>
</div>
<div class='pgnbx'>
<a href='?page=10'>10</a>
</div>
<div class='pgnbx'>
<a href='?jpage=11'>11</a>
</div>
<div class='pgnbx'>
<a href='?page=12'>12</a>
</div>
</div>
<div class="mainXJobs"> </div>
<DIV class="ad728Y"> PUT item "Classicus" here HERE</DIV>
<br><br><br>
</div>
</body>
</font>
</html>
______________________________________________________________________
css-discuss [css-d@css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
