How do I write separate code for different browsers? I have created a website that works fine in Firefox but is a bit off in IE, Chrome and Safari. How can I direct specific code to each browser?
1 Like
Perhaps if you let us see your code somone can advise you. You shouldn’t be writing different code for different browsers.
Resetting your CSS will prevent several browser specific quirks… you’ll only have to adjust your existing styles to the reset CSS then.
1 Like
Thanks gandalf458. Code and CSS follow:
- CODE
<?php include_once $_SERVER['DOCUMENT_ROOT'] . '/includes/helpers.inc.php';?>
<DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Administer Site</title>
<link rel = "stylesheet" type = "text/css" href = "AboutUsMk2.css">
<link rel = "stylesheet" type = "text/css" href = "headerMk1.css">
<link rel = "stylesheet" type = "text/css" href = "lectures.css">
<style type="text/css">
<!--.scroll{
height:80%; width: 70%; overflow:scroll;
}
</style>-->
</head>
<body>
<img id = "background_body" src = "background2.jpg"/>
<header id = "head">
<h1 id = "head_h1">West Surrey National Trust Centre</h1>
<h3 id = "head_h3">In support of the National Trust since 1971</h3>
<p id = "head_p">in support of</p>
<img id = "head_img" src = "NTlogo.png"/>
<nav>
<ul>
<li><a href = "../index.php">Home</a></li>
</ul>
</nav>
</header>
<?php if (isset($visits)):?>
<table class = "table">
<colgroup>
<col id = "empty"></col>
<col id = "date"></col>
<col id = "visit"></col>
</colgroup>
<thead>
<tr>
<th class = "emptycol"></th>
<th class = "datecol" scope = "col">Date</th>
<th class = "visitcol" scope = "col">Visit</th>
</tr>
</thead>
</table>
<div class = "scroll">
<form action = "" method = "post" class = "tableform">
<table class = "formtable">
<?php foreach($visits as $visit):?>
<tr>
<td class = "td"><input type = "hidden" name = "id" value = "<?php htmlout($visit['id']);?>"></td>
<td class = "td1"><input type = "submit" name = "visit" value = "<?php htmlout($visit['lecturedate']);?>"></td>
<td class = "td2"><input type = "submit" class = "wrap" name = "visit" value = "<?php htmlout($visit['title']);?>"></td>
</tr>
<?php endforeach;?>
</table>
</form>
</div>
<form action = "" method = "post" class = "myForm";>
<p>
<label class = "label2" for = "title">Heading</label>
<textarea id = "title" name = "title" cols = "100" ><?php htmlout($title);?>
</textarea>
</p>
<p>
<label class = "label" for = "lecturedate">Date</label>
<textarea id = "lecturedate" name = "lecturedate" cols = "100" ><?php htmlout($lecturedate);?>
</textarea>
</p>
<p>
<label class = "label" for = "sub_heading">Sub Heading</label>
<textarea id = "sub_heading" name = "sub_heading" cols = "100"></textarea>
</p>
<p>
<label class = "label1" for = "content">Content</label>
<textarea id = "content" name = "content" rows = "10" cols = "100"><?php htmlout($text);?>
</textarea>
</p>
<p>
<span class = "form1">
<input type = "submit" name = "action" value = "New">
<input type = "hidden" name = "id" value = "<?php htmlout($id);?>">
<input type = "submit" name = "action" value = "Edit">
<!--<input type = "reset" value = "Clear">-->
<input type = "submit" onClick = "myFunction" value = "Clear">
<input type = "submit" name = "delete" value = "Delete">
</span>
</p>
</form>
<?php endif;?>
<script type = "text/javascript">
function myFunction()
{
document.getElementById("myForm").reset();
}
</script>
<div id = 'output'>
<?php if(isset ($text)):
htmlout ($text);
endif;?>
</div>
</body>
</html>
- CSS
/*Style the heading table*/
.table
{
width: 25%;
/*height: 5%;*/
border-collapse: collapse;
position: relative;
/*top: 1.5%;*/
/*background: yellow;*/
border: none;
}
.formtable tbody
{
width: 235px;
}
div.scroll
{
height: 50%;
width: 23%;
position: absolute;
top: 164.5%;
left: 9.8%;
overflow: auto;
}
/*Style list table*/
.formtable
{
position: relative;
top: -200%;
left: 10%;
/*background: #5F6975;*/
/*border: 1px solid black;*/
border-collapse: collapse;
font-family: Comic Sans MS;
font-style: italic;
color: black;
width: 70%;
/*height: 139.6%;*/
/*height: 50%;*/
display: inline-block;
text-align: center;
/*border-spacing: 0;*/
/*background: red;*/
}
/*Style form in list table*/
.tableform
{
position: relative;
top: 10%;
width: .1%;
height: 5%;
}
.table th
{
border: none;
}
/*Style the date and visit headings */
.table .datecol
{
border: 1px solid black;
font-family: Comic Sans MS;
font-size: 1.2em;
font-style: italic;
background: green;
position: absolute;
text-align: center;
width: 28.65%;
border-left: none;
left: 40%;
}
.table .visitcol
{
border: 1px solid black;
/*border-left: 2px solid black;*/
font-family: Comic Sans MS;
font-size: 1.2em;
font-style: italic;
background: green;
position: absolute;
left: 69.65%;
text-align: center;
width: 53.8%;
border-left: none;
}
.table .datecol, .table .visitcol
{
position:absolute;
top: -7000%;
}
.table .datecol
{
border-left: none;
}
table.formtable td.td1, table.formtable td.td2
{
/*border-top: none;
border-bottom: 1px solid black;
border-left: none;*/
border: 1px solid black;
border-collapse: collapse;
text-align: center;
background: #5F6975;
height: 30px;
/*background: red;*/
}
.formtable td.td1
{
width: 32%;
}
/*.formtable td.td1 input
{
width: 10%;
}*/
.formtable td.td2
{
width: 98%;
}
.formtable input
{
background: #5F6975;
border: none;
}
.formtable input:hover
{
color: red;
}
/*Style date heading*/
#date
{
position: absolute;
/*text-align: center;*/
}
/*Style visit heading*/
#visit
{
width: 30.5%;
position: relative;
left: 100%;
/*background: red;*/
/*border-left: none;*/
}
#empty
{
width: .01%;
background: green;
}
/*Make cell adjust height to suit.*/
.wrap
{
white-space: normal;
word-wrap: word-break;
}
/*Style the edit form*/
.myForm
{
font-size: 1.2em;
background-color: #5F6975;
/*background: rgba(255, 255, 255, .3);*/
font-family: Comic Sans MS;
width: 50%;
height: 41.5%;
color: black;
position: relative;
left: 40%;
top: -17%;
/*border: 1px solid black;*/
}
/*Style labels*/
.label, .label1, .label2
{
display: inline-block;
width: 25%;
vertical-align: right;
text-align: right;
margin-left: 5px;
font-weight: bold;
font-style: italic;
/*border: 1px solid black;*/
}
.label
{
position: relative;
top: 100%;
}
.label1
{
position: absolute;
top: 65%;
}
/*.label2
{
margin-top: 2px;
}*/
.myForm textarea
{
position: absolute;
left: 30%;
width: 70%;
text-align: center;
white-space: normal;
background: #5F6975;
/*background: rgba(255, 255, 255, .3);*/
border: 1px solid black;
border-spacing: 0;
}
.myform
{
position: relative;
top: -20%;
}
/*form submit buttons*/
.myForm .form1
{
position: absolute;
top: 110%;
left: 12%;
width: 100%
}
.myform .form1 input
{
width: 100px;
display: inline-block;
}
.myForm .td
{
height: .o1%;
}
Hi,
It might be better if you could show a drawing of the layout you want to achieve as the css you are using will not work in the way that you expect. If we can see your desired result then we can point you forward with techniques that will produce the result more effectively.
Presently you have made the classic beginners mistake (don’t feel bad about it as we have all done this) as you are moving things around with relative positioning. Relative positioning wasn’t meant for this as it never actually moves anything physically. The element will always occupy the same space it had on the page even though it may appear somewhere else. This makes it of little use for structural layout unless and was meant for more subtle effects or movements that don’t disrupt the flow of the page.
As a beginner you probably won’t need to move anything relatively at all and you need to abandon this approach.
Another common mistake is to absolutely place everything and this is also a bad approach as it does not maintain control of the flow of the page and each element becomes an island that is impossible to control. Absolute positioning is generally used for small elements in controlled situations where the flow of the page is already maintained or accounted for.
For example the following rule of yours should almost never be seen in a web page.
.myForm .form1
{
position: absolute;
top: 110%;
left: 12%;
width: 100%
}
Top 110% is a magic number and will rarely work in any situation to any satisfaction. Generally you want elements to follow each other logically so that if you change one element then the following element accommodates it without drama (such as when a user resizes their text or you cms outputs more content into a div than you expect). Or indeed when the browser window is made smaller and text runs to multiple lines instead of one.
None of the above is much immediate help to you I know but the best course of action is to start again from the ground up with techniques that will not leave gaping holes in the page and in your logic.
Also remember to run your code through the validator (css and html) and you will easily pick up mistakes like these.
.myForm .td
{
height: .o1%;
}
I think you meant .01% but to be honest that doesn’t make a lot of sense either and is probably not something you need.
If you have a rough drawing of how the page should look then we can give you some starting blocks to get you moving in the right direction 
2 Likes
Thanks PaulOB. I greatly appreciate your helpful comments.
Here is a screen shot of what I am trying to do.
Doc1.doc (313.5 KB)
Hi,
I haven’t had a lot of time today so further explanation will have to wait until the weekend (unless Ron wants to jump in) but here’s a rough start of how you should approach things these days with responsive design in mind.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* We will use border box model for IE8+ - padding and borders are included inside the width */
*, *:before, *:after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box; /* ie8+ */
}
/* general reset */
html, body, table {
margin: 0;
padding: 0;
font-size: 100%;
}
object, iframe, blockquote, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, caption, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border:none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, #main {
display:block;
}
ol {
list-style:outside decimal;
margin-left:1.5em
}
ul {
list-style:outside disc;
margin-left:1.5em
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align:top;
}
/* clearing technique */
.clearfix:after {
content:"";
display:table;
clear:both;
width:100%;
}
a img {/* remove borders from linked images*/
border:none;
display:block
}
/* Remove default vertical scrollbar in IE6/7/8/9*/
textarea {
overflow: auto;
resize: vertical;/* allow vertical resize only */
}
/* end reset */
/* a few defaults */
p, h1, h2, h3, h4, h5, h6, ul {
margin-bottom:10px
}
body {
line-height:1.5;
font-size:100%;
font-family: Arial, Helvetica, sans-serif;
color:#5a5a5a;
text-align:left;
background:#aaa;
}
#outer {
margin:0 auto;
width:100%;
padding:10px;
max-width:1280px;
min-width:260px;
background:#fff;
box-shadow:0 0 20px rgba(0,0,0, 0.3);
}
.top-header {
overflow:hidden;/* contain float*/
margin:0 0 35px;
}
.logo {
color:#f00;
font-size:36px;
line-height:1.0;
}
.logo small {
display:block;
font-size:18px;
border-top:5px solid #f00;
}
.logo img {
float:left;
}
.logo span {
margin-left:220px;
text-align:center;
display:block;
padding:25px 0 0;
}
.breadcrumb {
max-width:760px;
margin:0 auto 50px;
color:#f00;
font-style:italic;
font-weight:bold;
}
.columns, .myForm {
display:table;
width:100%;
border-collapse:collapse;
tale-layout:fixed;
}
.column1 {
width:360px;
}
.column1, .column2 {
padding:10px;
}
.tc {
display:table-cell;
vertical-align:top;
}
.visit {
width:100%;
border-collapse:collapse;
}
.visit th {
padding: 5px 10px;
text-align:center;
background:green;
color:#fff;
font-size:140%;
border:1px solid #000;
}
.visit td {
background:#666;
color:#fff;
text-align:center;
padding:5px 10px;
border:1px solid #000;
}
.myForm label {
border:1px solid #000;
text-align:center;
font-size:120%;
vertical-align:middle;
padding:5px 10px;
width:180px;
display:block;
margin:10px;
}
.labelhead {
padding:0 20px 0 50px;
}
.myForm div {
display:table-row;
}
.myForm input, .myForm textarea {
width:100%;
padding:10px;
border:1px solid #000;
margin:10px 0;
}
.frm1 inmp;
ut {
width:auto;
}
.form1 {
display:flex
}
.form1 input {
margin:10px
}
.form1 input:first-child {
margin-left:0
}
.form1 input:last-child {
margin-right:0
}
@media screen and (max-width:860px) {
.column1, .column2 {
display:block;
width:auto;
}
.labelhead {
padding-left:0;
}
}
@media screen and (max-width:600px) {
.myForm .tc {
display:block;
width:auto;
margin:0 0 5px;
}
.labelhead{padding:0;}
.myForm div{display:block;margin:0 0 15px;}
.labelhead label{margin:0;width:auto;}
.logo{font-size:160%}
.logo img{display:block;max-width:260px;margin:0 auto 10px;float:none;}
.logo span{margin:10px 0;}
}
</style>
</head>
<body>
<div id="outer">
<header class="top-header">
<h1 class="logo"> <img src="http://placehold.it/200x125" width="200" height="125"> <span>West Surrey National Trust Centre <small>In support of the National Trust since 1971</small></span> </h1>
</header>
<div class="breadcrumb"><span>Home</span></div>
<main class="columns">
<div class="tc column1">
<!-- side table goes here -->
<table class="visit">
<tr>
<th scope="col">Date</th>
<th scope="col">Visit</th>
</tr>
<tr>
<td>5/1/2016</td>
<td>Pepys:Plague and Fire</td>
</tr>
<tr>
<td>5/1/2016</td>
<td>Pepys:Plague and Fire</td>
</tr>
<tr>
<td>5/1/2016</td>
<td>Pepys:Plague and Fire</td>
</tr>
<tr>
<td>5/1/2016</td>
<td>Pepys:Plague and Fire</td>
</tr>
<tr>
<td>5/1/2016</td>
<td>Pepys:Plague and Fire</td>
</tr>
<tr>
<td>5/1/2016</td>
<td>Pepys:Plague and Fire</td>
</tr>
<tr>
<td>5/1/2016</td>
<td>Pepys:Plague and Fire</td>
</tr>
<tr>
<td>5/1/2016</td>
<td>Pepys:Plague and Fire</td>
</tr>
</table>
</div>
<!-- end column one -->
<div class="tc column2">
<form action="" method="post" class="myForm";>
<div>
<span class="tc labelhead">
<label class="label2" for="title">Heading</label>
</span>
<span class="tc">
<textarea id="title" name="title" cols="100" ></textarea>
</span>
</div>
<div>
<span class="tc labelhead">
<label class="label" for="lecturedate">Date</label>
</span>
<span class="tc">
<textarea id="lecturedate" name="lecturedate" cols="100" ></textarea>
</span>
</div>
<div>
<span class="tc labelhead">
<label class="label" for="sub_heading">Sub Heading</label>
</span>
<span class="tc">
<textarea id="sub_heading" name="sub_heading" cols = "100"></textarea>
</span>
</div>
<div>
<span class="tc labelhead">
<label class="tc label1" for="content">Content</label>
</span>
<span class="tc">
<textarea id="content" name="content" rows="10" cols="100"></textarea>
<span class="form1">
<input type="submit" name="action" value="New">
<input type="submit" name="action" value="Edit">
<input type="submit" value="Clear">
<input type="submit" name="delete" value="Delete">
</span>
</span>
</div>
</form>
</div>
</main>
</div>
</body>
</html>
Just copy that code save it locally and run it n your browser to see how it looks,
Note that there is no relative or absolute positioning used at all and the design is fluid and works at all widths within reason (and within the time I had this morning).
I’ve used the display:table approach instead of floats (support is ie8+) because it is more robust but if only modern browsers support is required then flexbox could be a choice also.
Media queries are used to change the design to fit on smaller screens in the best fit possible.
Hope that helps or at least gives a starting point for you.
1 Like
Thanks for your help. It will take me a while to get my mind round this responsive web design approach. After your previous comments I had thought to start again from scratch (third time lucky!) using divs, float, margins and padding. Your example coding makes use of a similar approach, although rather more complex than I had envisaged! I shall have fun sorting it all out.
Play around with it and if there’s anything you don’t understand or need to know why something was done then just shout. It’s one of the best ways to learn by experimenting with other peoples code.
I’m having fun playing around with your code. One curious thing: I’m using Notepad++ as my text editor, which usually highlights HTML tags in pale blue, class in red and the class name in black. However, in this case the < main class = “columns”> statement is greyed out. What does this mean?
It could be that notepad++ does not recognise that element. It has not been widely supported as long as other html5 elements.
I do not use NotePad++,but the grayed tag may be that some of the newer HTML5 tags are not included in NotePad++'s bracketing scheme. You might check their site for an updated scheme.
I’ve just tried it in Notepad++ and it seems @ronpat’s analysis is correct. It recognises header but not main…
I have another question. I have adopted your code, which now behaves more or less like my original. However, I cannot get the scroll bar function to work. I need to fix the height of the Date/Event column and set the scroll bar to the same height. How do I do that? I’ve tried setting a height value but it has no effect.
The code (css and html) follows:indent preformatted text by 4 spaces
editor.html.php (7.5 KB)
If you mean the element where you have added a div with a class of scroll then you just need to add a fixed height in px (not percent) to .scroll. You already have overflow:scroll in place so just add the height.
1 Like
Many thanks. All now working.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.