Designing web pages in CSS for all web browser.

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;
}

4

Contributors

10

Replies

2 Weeks

Discussion Span

1 Year Ago

Last Updated

11

Views

Question
Answered

P.manidas

Posting Whiz

304 posts since Oct 2008

Reputation Points: 53

Solved Threads: 14

Skill Endorsements: 0

1 Year Ago

0

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

almostbob

Nearly a Senior Poster

3,280 posts since Jan 2009

Reputation Points: 585

Solved Threads: 399

Skill Endorsements: 7

1 Year Ago

0

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

Posting Whiz

304 posts since Oct 2008

Reputation Points: 53

Solved Threads: 14

Skill Endorsements: 0

1 Year Ago

0

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

Posting Whiz

304 posts since Oct 2008

Reputation Points: 53

Solved Threads: 14

Skill Endorsements: 0

1 Year Ago

0

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

Dani

The Queen of DaniWeb

Administrator

21,344 posts since Feb 2002

Reputation Points: 1,555

Solved Threads: 367

Skill Endorsements: 122

1 Year Ago

0

Thank you Madam (cscgal),

Now my codes are looking good.

P.manidas

Posting Whiz

304 posts since Oct 2008

Reputation Points: 53

Solved Threads: 14

Skill Endorsements: 0

1 Year Ago

0

Dear Sir/Madam,

I am waiting for your advice on my CSS codes.

P.manidas

Posting Whiz

304 posts since Oct 2008

Reputation Points: 53

Solved Threads: 14

Skill Endorsements: 0

1 Year Ago

0

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.

drjohn

Posting Pro

508 posts since Mar 2010

Reputation Points: 76

Solved Threads: 99

Skill Endorsements: 4

1 Year Ago

0

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.

P.manidas

Posting Whiz

304 posts since Oct 2008

Reputation Points: 53

Solved Threads: 14

Skill Endorsements: 0

1 Year Ago

0

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.

drjohn

Posting Pro

508 posts since Mar 2010

Reputation Points: 76

Solved Threads: 99

Skill Endorsements: 4

1 Year Ago

0

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.

P.manidas

Posting Whiz

304 posts since Oct 2008

Reputation Points: 53

Solved Threads: 14

Skill Endorsements: 0

Question Answered as of 1 Year Ago by drjohn, Dani and almostbob

Designing web pages in CSS for all web browser.

This question has already been solved: Start a new discussion instead