Designing web pages in CSS for all web browser.

Question

P.manidas 39 Posting Whiz in Training

12 Years Ago

Dear Sir/Madam,

I have written some CSS codes for designing web pages. The codes have produced well design in FireFox browser, but not in InternetExplorer and GoogleChrome as I have tested. It may not be worked in other browser also.

But my question is that, how can I produced well design web pages by these CSS codes for nearly all browser.

Please guide me Sir/Madam,

My codes are....

body{background:white;}

h1{text-align:center;}
input{font-size:40px; color:white;background:green;}

#leftcol{
color:white;
background:green;
position:absolute;
border:2px solid gray;
top:120px;
left:30px;
width:148px;
height:416px;
padding: 10px;  padding-top: 20px;
}

#content{
font-size:20px;
text-align:center;
color:white;
background:green;
position:absolute;
border:2px solid gray;
top:120px;
left:200px;
width:766px;
height:416px;
padding: 10px;  padding-top: 20px;


}

#header{
font-size:50px;
text-align:center;
color:red;
background:#0f0;
position:absolute;
border:2px solid gray;
top:30px;
left:30px;
width:936px;
height:68px;
padding:10px;
}

#footer{
color:black;
background:#0f0;
position:absolute;
border:2px solid gray;
top:568px;
left:30px;
width:936px;
height:16px;
padding:10px;
}

html-css web-browser web-design

4 Contributors
10 Replies
413 Views
2 Weeks Discussion Span
Latest Post 12 Years Ago Latest Post by P.manidas

almostbob 866 Retired: passive income ROCKS

12 Years Ago

pixels are not a layout tool,
the size of a pixel is dependent on screen resolution, and gets smaller with every new development of monitor.
previously a 15inch monitor was 800px wide, 53px/inch
this laptop has 160px/inch,
Ipad Retina display 9.7-inch (diagonal)(7.7*5.82)2048-by-1536-pixel 264px/inch
the next gen(in 3months??) will doubtless be higher
any page laid out in fixed dimensions will only look 'right' on the screen it was laid out on, even if the user is using the same browser, and will fail on any other resolution or in part-screen windows
Current best practice is em (for typeface) and % (for elements) as layout dimensions. These scalar quantities adjust to window size, screen resolution user preference and basefont settings, on all devices from telephones(200px screen) to this thing plugged into a projector, as it is at the moment (3200px 8 feet wide) playing wolfenstein.
fonts in em, adjust to user preference instead of overriding them, making the site instantly disability friendly
a site css coded to add to 100% will work in all ( fingersX :) ) devices.
together with examining css @media handheld{} to iconify images for smaller devices, and other tweaks
example only

body{background:white;} 
h1{text-align:center;}
input{font-size:2em; color:white;background:green;} 
#leftcol{color:white;background:green;position:absolute;border:0.1em solid gray;top:2%;left:2%;width:10%;height:30%;padding:.1em;padding-top:.2em;}

still won't be perfect but closer

incidentally, white text on dark ground is very user unfriendly, the eye does not function well that way

Edited 12 Years Ago by almostbob because: n/a

Dani 4,329 The Queen of DaniWeb

12 Years Ago

Your code wasn't indented. Is it better now?

drjohn 56 Posting Pro in Training

12 Years Ago

There's no sign of a doctype in your html, and a lack of a doctype always triggers quirks mode, which is a different model in different browsers.
http://www.alistapart.com/articles/doctype/
and choose the HTML 4.01 Strict (or Transitional). Ignore the XHTML, as many browsers convert it back to html, so you gain nothing from using it - it's an evolutionary dead-end in web design.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

P.manidas 39 Posting Whiz in Training · Answer 1 · 2012-03-22T04:28:24+00:00

I have checked my codes as you advised but result is not good. I am stuck with these codes. Is there any other way for good result? I have experiment a lot but not getting the right way. Please guide me sir again. I am putting here the codes for your ready reference.

CSS codes

    body{background:red;} 

input{font-size:1.3em;color:white;background:green;}

#leftcol{
color:white;
background:green;
position:absolute;
top:12%;
left:2%;
width:22%;
height:80%;
}

#content{
text-align:center;
color:white;
background:green;
position:absolute;
top:12%;
left:22%;
width:76%;
height:80%;
}

#header{
text-align:center;
color:red;
background:#0f0;
position:absolute;
top:2%;
left:2%;
width:96%;
height:10%;
font-size:250%;

}
#footer{
color:black;
background:#0f0;
position:absolute;
top:92%;
left:2%;
width:96%;
height:6%;
font-size:100%;
}

ASP file

    <html>
<head>
<title>Puzzle Number</title>
<link rel="stylesheet" type="text/css" href="StylePuzzle.css" />
<script type="text/javascript" src="JSPuzzle.js"></script>
</head>

<body onload="Ask()">

<div id="header">
Welcome to the Puzzle Number
</div>

<div id="content">
<h1>Arrange these numbers in ascending/descending order</h1>


<input type="button" style="height:15%;width:10%;" Id=n1 value="2" OnClick="checknumber('1')">
<input type="button" style="height:15%;width:10%;;" Id=n2 value="4" OnClick="checknumber('2')">
<input type="button" style="height:15%;width:10%;" Id=n3 value="8" OnClick="checknumber('3')">
<br>
<input type="button" style="height:15%;width:10%;" Id=n4 value="1" OnClick="checknumber('4')">
<input type="button" style="height:15%;width:10%;" Id=n5 value="5" OnClick="checknumber('5')">
<input type="button" style="height:15%;width:10%;" Id=n6 value="7" OnClick="checknumber('6')">
<br>
<input type="button" style="height:15%;width:10%;" Id=n7 value="" OnClick="checknumber('7')">
<input type="button" style="height:15%;width:10%;" Id=n8 value="6" OnClick="checknumber('8')">
<input type="button" style="height:15%;width:10%;" Id=n9 value="3" OnClick="checknumber('9')">
<br/>
<input type="button" style="height:8%;width:31%;" Id=CTN value="Clicked = 0">
</div>

<div id="leftcol">
<center>
<h2>Hello,</h2>

<input type="button" style="height:8%;width:70%;" Id=Player value="Player Name">
<Br>
<h2>Best Score</h2>

<input type='button' style='height:8%;width:70%;' Id=BtnName value="P. Name">
<Br>
<input type='button' style='height:8%;width:70%;' Id=BestScrore value="Clicked=">
<Br>
<h2>Next Puzzle</h2>
<input type='button' style='height:8%;width:70%;' Id=NxtPzzle value="More Puzzle">
</center>
</div>

<div id="footer"><center>Developed by Mr. Pankaj Mani Das</center></div>
</body>
</html>

P.manidas 39 Posting Whiz in Training · Answer 2 · 2012-03-22T04:38:49+00:00

Sorry sir, I am unable to put the ASP/HTML file's codes here. only few lines of that file are listed above. But when i tried to edit above post, codes are there. I don't know what to do there. Yesterday also i was unable to login for second time. I have no idea what is happening here. Probably, new design of Daniweb is not working properly.

P.manidas 39 Posting Whiz in Training · Answer 3 · 2012-03-22T07:10:24+00:00

Thank you Madam (cscgal),

Now my codes are looking good.

P.manidas 39 Posting Whiz in Training · Answer 4 · 2012-03-28T11:50:33+00:00

Dear Sir/Madam,

I am waiting for your advice on my CSS codes.

P.manidas 39 Posting Whiz in Training · Answer 5 · 2012-03-30T12:44:07+00:00

Dear DrJohn,

Thanks for replying sir, as you mentioned that Doctype declaration is not there in html. So, I have tried putting Doctype declaration above in my asp file. And I have tried using both html 4.01 Strick and transitional one by one and have got the result as follows ...

Firefox 11 - Layout is good as per my requirement but JavaScript is not working. Please, let me know what i have to do for that.
IE 6 - Layout is not good but JavaScript is working properly.
IE 8 and Google Chrome - Everything is ok. Here layout and JavaScript are working properly.

Note : I have written all codes using windows Notepad.

drjohn 56 Posting Pro in Training · Answer 6 · 2012-03-30T18:36:33+00:00

IE6 is used by 1% of users world wide - so you can ignore any problems there unless your site is getting many thousands of uniques per day.

i have no idea why your javascript is not working in Firefox.

P.manidas 39 Posting Whiz in Training · Answer 7 · 2012-04-05T05:45:27+00:00

I have found the syntex/reason, why the JavaScript was not working in the FireFox after putting the doctype declaration in the ASP file. It was only because of not using the getElementById

Earlier, I had used like this....

if(num=='1')
{
 if (n2.value=='')
 {
  n2.value=n1.value;
  n1.value='';
  Payer.value=Prom;
 }
 else if (n4.value=='')
 {
  n4.value=n1.value;
  n1.value='';
 }
}

Now, I have used like this.....

if(num=='1')
{
 if (document.getElementById('n2').value=='')
 {
  document.getElementById('n2').value=document.getElementById('n1').value;
  document.getElementById('n1').value='';
 }
 else if (document.getElementById('n4').value=='')
 {
  document.getElementById('n4').value=document.getElementById('n1').value;
  document.getElementById('n1').value='';
 }
}

Now the JavaScript is working in FireFox also. So, I am closing this thread, though there is a layout problem in IE6.Thank you all for replying to this thread with valuable information.