Hi everyone…
I am a newbie. I have been working on this website for a year. I am almost done but on my final step, I checked my website on all the browsers and realized I have serious problems with margins.I thought I fixed my aligning problems with the help of the experts here (mainly Paul O’B) but it still exists. Every browser shows drastic differences. What am I doing wrong? I validated my html and CSS as much as I could… please help… below is my code…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><!-- <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/> -->
<title>Rajeev Thomas Photography</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
font-size:100%;
}
/* mac hide\\*/
html, body {height:100%}
/* end hide */
* {margin:0;padding:0}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content:none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
}
a {
text-decoration: none;
color: #ef6702;
}
a:visited {
color: #ef6702;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #ffffff;
}
body {
background:#0c0000 url( photos/1.jpg) no-repeat center top;
}
#header1{
text-align:left;
padding:0px 0px 7px 0px;
margin: 25px 0px 0px 0px;
border-bottom: 1px solid #260101;
}
#slideshow {
margin-left: 350px;
margin-top: -120px;
position:absolute;
clear:both;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
.des{
font-size: 15px;
padding: 0px 0px 0px 290px;
margin: -158px 0px 0px -25px;
color: #ffffff;
text-align: left;
}
.navlinks {
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
text-align:left;
padding: 0px 0px 0px 0px;
margin: 50px 0px 0px 1205px;
line-height: 20px;
}
.intro {
font-family: "‘Arial Narrow’", sans-serif;
color: #e2c732;
margin:500px 0px 0px 0px;
padding: 10px 0 0 0;
font-size: 15px;
display: block;
width: 600px;
line-height: 22px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #4e4747;
position:relative;
}
.wrapper {
min-width:600px;
max-width:1440px;
min-height:100%;
height: auto !important;
height: 100%;
margin: 0px auto -306px;
clear: both;
position:relative;
}
.push {
height: 306px;
padding: 0px 0px 0px 0px;
clear: both;
font-size: 11px;
text-align: left;
}
.footer {
height:306px;
background-image: url(photos/2.jpg);
padding: 1px 0px 0px 0px;
margin: 0px 0px 0px 0px;
clear: both;
font-size: 11px;
text-align: left;
background-position: 0% 0%;
background-repeat: no-repeat;
border-bottom: 1px solid #260101;
}
.textarea {
font-size:15px;
width:260px;
height:23px;
background-color: #8c5535;
border: 1px solid #401c14;
padding: 0px 0px 0px 0px;
margin:5px 1px 10px 8px;
text-align:left;
background-position: 0% 0%;
}
.buttons {
padding: 3px 3px 23px 3px;
margin:0px 0px 0px -3px;
background-color: #401c14;
border: none;
color:#ff7302;
font-size: 15px;
height:23px;
}
#seeker {
font-size: 15px;
margin:310px 0px 5px 580px;
padding: 10px 2px 2px 0px;
background-image: url("photos/.jpg");
background-position: 0% 0%;
background-repeat: no-repeat;
height:35px;
background-color: #0d0004;
}
.footnote {
font-size: 15px;
margin:2px 0px 25px -85px;
padding: 0px 0px 0px 0px;
background-position: 0% 0%;
background-repeat: no-repeat;
height:10px;
background-color: #0d0004;
border-top: 0px solid #260101;
text-align:left;
color:#ff7302;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header1"><img src="photos/header-1-.png" alt="header"/></div>
<div class="navlinks">
<a href="index.php">Home</a><br/>
<a href="viewgallery.php">My Galleries</a><br/>
<a href="news.php">Trips And Updates</a> <br/>
<a href="searchmyway.php">Search</a><br/>
<a href="aboutme.php">About Me</a><br/>
</div>
<div id="slideshow">
<img src="photo1.jpg" alt="Slideshow Image 1" align="middle" class="active" />
<img src="photo2.jpg" alt="Slideshow Image 2" />
<img src="photo3.jpg" alt="Slideshow Image 3" />
<img src="photo4.jpg" alt="Slideshow Image 4" />
<img src="photo5.jpg" alt="Slideshow Image 5" />
<img src="photo6.jpg" alt="Slideshow Image 6" />
<img src="photo7.jpg" alt="Slideshow Image 7" />
<img src="photo8.jpg" alt="Slideshow Image 8" />
<img src="photo9.jpg" alt="Slideshow Image 9" />
<img src="photo10.jpg" alt="Slideshow Image 10" /></div><br/>
<div class="intro">
<p>xxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="push"></div>
<div class="footer" >
<form name="searchform" id="seeker" action="searchmyway.php" method="get"><input type="text" name="q" class="textarea"/>
<input type="submit" name="Submit" value="Search" class="buttons" />
<input type="hidden" name="form_id:search" value="1" />
</form>
<div class="footnote">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.
</div>
</div>
</div>
</body>
</html>
I was able to use your CSS to all my pages and it stopped all the browser shifts. But I am not able to figure out my ‘search page’. Unfortunately the server is down so I am including the code. The search page has only one form in it and the user can search something and the results are produced on the same page. But since the page has nothing but a 'search form in it the footer sits way up and I added some bottom padding to the form so footer stays down. But this added padding causes trouble when the ‘search results are produced’. The extra padding won’t let me drag up the search results. Also this page shows up with a huge space under the footer in IE8… can you give me any suggestions? The code is below… thanks for your patience with me…