|
CSS - What Is The Right Approach
How do you guys approach rendering bugs do you try apply hack, separate style sheets for each browser or do you try to change around the css so it displays the same on all browsers.
I seem to be finding niggly things and differences between ie6 and Firefox all the time quite frankly it make;s me wanna go For instance today I found out about the hasLayout bug, where the top margin was not showing in ie6. Messing around with margin and padding I manged to fix it by using padding instead of margin. But sometimes on a off day I will mess around with positioning. What is the recommend solution to prevent and solve such issues, Any Advice much appreciated Similar TutorialsHi there. I am sick and tired of constantly working my fingers like slaves by writing <tr><td> etc all the time. I have decided to try out the tableless method of web design. So I began my quest only to trip up on the first hurdle. I wanted to create a <div> element which sits in the middle of my page, and to have paragraphs and images to the right, and perhaps a menu to the left of the div element. First off, the paragraphing to the right isn't working. I am clearly very talented. Anyway, here's my code: Code:
<html>
<head>
<title>
</title>
<style type="text/css">
<!--
body {
margin: 10% 10% 10% 10%
}
.main {
padding:20px;
background-color:#ffffff;
border:solid 1px #333333
}
.inside {
float: right;
width:500px;
}
-->
</style>
</head>
<body>
<div class="main">
<div class="inside">
<P>
This is messed up.
</P>
</div>
</div>
</body>
</html>
So what's going wrong? Cheers Hello, I building a page with a form. Tables would be super easy, but my client expects web 2.0 Here's the page: http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I'm currently using <span class="form">, or <span> but look totally different on different computers (i.e. Firefox on PC or MAC) Here's my CSS: Code: .last_name
{
margin-right:230px;
}
.first_name
{
margin-right:220px;
}
Can anyone tell me the best approach? Basically I need each field's text to line up below and to the left. The form is a lot longer and has varied width fields throughout. Any help or ideas are appreciated. thanks -S I am new to web development and am in the process of learning XHTML, CSS, PHP and SQL. I need to know if i am making any major mistakes in my approach to making this site as far as CSS is concerned. The site is a simple file browser which displays files and their details in a table with a vertical navigation bar. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="header"></div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="/dotastats">DoTA</a></li>
<li><a href="/phpmyadmin">phpMyAdmin</a></li>
<li><a href="upload.php">Uploads</a></li>
</ul>
<div id="content">
<table>
<thead>
<tr><td><a href="upload.php?sort=filename">Filename</a></td><td><a href="upload.php?sort=ext">Type</a></td></tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<?php
require("functions.php");
updateFiles();
$page = $_GET['page'];
$sort = $_GET['sort'];
if($sort == "")
{
$sort = "ext";
}
$files = getFiles($sort);
$i = 0;
$colours = array('even', 'odd');
foreach($files as $v)
{
if($i >= ($page * 20) && $i < (($page * 20)+20))
{
echo
'<tr class="'.$colours[$i % 2].'">
<td><a href="files/'.$files[$i][0].'">'.$files[$i][0].'</a></td>
<td>'.$files[$i][1].'</td>
</tr>';
}
$i++;
}
?>
</tbody>
</table>
<?php
echo "<br/>";
$pageCount = $i / 20;
for($i = 0; $i <= $pageCount; $i++)
{
echo " [";
echo "<a href='upload.php?page=$i&sort=$sort'>$i</a>";
echo "] ";
}
?>
</div>
</body>
</html>
Edit: Code: html, body {
margin: 0;
padding: 0;
}
a:link {text-decoration:none}
a:hover {text-decoration:underline}
#nav {
background: #9966CC;
height: 30px;
border: 1px dotted #000000;
margin:0;
padding:0;
text-align: center;
}
#nav li {
display:inline;
padding:0 10px;
margin:0;
font-size: 14;
}
#header {
background: black;
height: 100px;
}
#footer {
background: black;
height: 100px;
}
#content {
width: 800px;
margin: auto;
padding: 10px;
}
#upload {
text-align: center;
}
table {
font-size: 14;
}
table thead tr {
background-color: #6699FF;
font-weight: bold;
}
table tbody td {
width: 400px;
}
table tbody tr.even {
background-color: #B0C4DE;
}
table tbody tr.odd {
background-color: #CAE1FF;
}
table tbody tr:hover {
background-color: #9999FF;
}
I have a programmer who developed a CMS website using Javascript, PHP and CSS. He is having alot of trouble getting the website to remain consistent within all the pages of the website. There is a misalignment going from page to page. It also tends to look inconsistent when comparing it with other browsers. What are the common methods to keep the website consistent. I have told him to use a Reset sheet, do you think this will work??? What are the common pitfalls or approaches a person should do to create a consistent website? eg. reset sheet?? Approach to coding? Not using certain type of coding?? Anyone have an approach or method that ensured them their websites were consistent and had no alignment issues? I read one was to avoid positioning coding. Any help appreciated!! |
|||||||