Aligning correctly in all the browsers

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>

It would be better if you could show a live link, as we don’t see the images etc. On the first glace, the first big mistake I see is the huge left margin on the navigation, which will mean it will be off screen for most people. You need to go about this all differenty, but first perhaps give a description of what you want to see, and, as I said, a live link. I just get a big black screen testing your code.

As Ralph said we will need a little more information to debug this because we can’t see why you have done some things because the images are not present.

The right nav should be floated into position and not just using a massive left margin. You also seem to have mixed absolute positioning in the middle and used large positive and negative margins to move things around afterwards which is a bit fragile.

It would be far easier if you could upload this and provide a link and then we can work with your images and see where things are supposed to be.

The sticky footer method you are using is an old method that won’t work properly in IIE7/8 and opera and you would be better off with the new version as shown in the CSS faq (see my sig).

The navigation should be a structured list and not bare anchors with breaks as that is not very semantic. It also looks like you slideshow should be in a list also and probably floated also.

Don’t use breaks just to make space but use margins on the elements themselves.

If you can provide a link (or attach a zip with the full code and images) then we will be able to give specific advice.:slight_smile:

Ralph and Paul…thank you very much for your time. My site is…http://www.rajeevthomas.com All I want to do is to align my slide show and gallery with the background. I think it is pretty much a centered layout.

The logo stays on the left corner and the navigation on the right side. The center part is only where content is added and it pushes out the footer as content added. This site is a working progress. So I have the slide-show and the gallery working in the link. Not all the folders have the images but the first one Abstract does have images.

I do not know much about floats… the way I align the introduction text under the slide-show is using margin…is that the correct way?

In the mean time I am gonna check out what Paul said about the footer also about making the navigation list as a structured list… thank you for the help…

Hi…

I have worked on the links and the footer…please take a look… the problems still persists… thank you for your help…

Hi,

This is very rough but I’d do something like this.


<!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>
<script type="text/javascript" src="http://www.rajeevthomas.com/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 2800 );
});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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%;
}
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;
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
    margin:0;
    padding:0;
}
body {
    background:#0c0000 url(http://www.rajeevthomas.com/photos/1.jpg) no-repeat 50% 0;
}
html, body {
    min-width:860px
}
a {
    text-decoration: none;
    color: #ef6702;
}
a:visited {
    color: #ef6702;
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: none;
    color: #ffffff;
}
a, input {
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
}
img a img {
    padding:1px;
}
#slideshow {
    width:720px;
    height:480px;
    margin:auto;
    position:relative;
}
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}
#header1 {
    text-align: left;
    padding:0 0 7x 0px;
    border-bottom: 1px solid #260101;
    height:146px;
    position:relative;
    overflow:hidden;
    border-top:400px solid #000;/* footer soak up */
}
#header1 span {
    width:520px;
    height:146px;
    position:absolute;
    left:0;
    top:0;
    background:url(http://www.rajeevthomas.com/photos/header-1-.png) no-repeat 0 0;
}
.main {
    width:860px;
    margin:auto;
    position:relative;
    left:40px;
}
.intro {
    font-family: "&#8216;Arial Narrow&#8217;", sans-serif;
    color: #e2c732;
    font-size: 15px;
    text-align:center;
    width: 600px;
    margin:auto;
    line-height: 22px;
    border-top:1px solid #4e4747;
    padding: 10px 0 0 0;
    clear:both;
}
.textarea {
    font-size:15px;
    width:260px;
    height:23px;
    background-color: #8c5535;
    border: 1px solid #401c14;
    padding:0;
    margin:5px 1px 10px 0x;
    text-align:left;
}
.buttons {
    padding: 3px 3px 23px 3px;
    margin:0px 0px 0px -3px;
    background-color: #401c14;
    border: none;
    color:#ff7302;
    font-size: 15px;
    height:23px;
}
.footer {
    height:92px;
    background: url(http://www.rajeevthomas.com/photos/2.jpg) no-repeat 50% 0;
    padding:307px 0 0 0;
    margin: auto;
    clear: both;
    font-size: 11px;
    text-align: center;
}
.footinner {
    width:100%;
    border-top: 1px solid #260101;
    text-align:center;
}
#seeker {
    font-size: 15px;
    padding: 10px 2px 2px 0px;
    background:#0d0004 url(http://www.rajeevthomas.com/photos/.jpg) no-repeat 0 0;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}
.footnote {
    font-size: 15px;
    padding:2px 0px 25px 0;
    background-color: #0d0004;
    color:#ff7302;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}
.link {
    margin:-97px 1px 157px 244px;
    padding:4px 0px 0px 3px;
    text-align: left;
    font-size: 17px;
}
.plinks {
    padding:10px 0px 0px 275px;
    margin:-40px 1px 5px 95px;
    text-align: left;
    font-size: 18px;
    color:#ff310b;
}
.limagePage {
    position:relative;
    left:95px;
    top:0px;
    width: 650px;
}
.limage {
    position:relative;
    padding:0px 0px 0px 0px;
    text-align: left;
    font-size: 18px;
    margin:-246px 0px 0px 251px;
}
.prev {
    margin:60px 0px 0px 160px;
    font-size: 30px;
    float:left;
    color:#FF0000;
}
.next {
    margin:-36px 0px 0px 1090px;
    font-size: 30px;
    float:right;
    color:#FF0000;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
.wrapper:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
.wrapper {
    min-height:100%;
    margin-top:-400px;
}
* html .wrapper {
    height:100%
}
.me {
    font-size: 14px;
    color:#ff7302;
}
ul.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    position:absolute;
    right:-100px;
    text-align:left;
}
ul.nav li {
    position: relative;
}
ul.nav li a {
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none;
    font-size: 15px;
    padding: 5px;
    color: #ef6702;
}
/* Fix IE. Hide from IE Mac \\*/
* html ul.nav li {
    float: left;
}
* html ul.nav li a {
    height: 1%;
}
/* End */
</style>
</head>
<body>
<div class="wrapper">
    <h1 id="header1">Rajeev Thomas Photography<span></span></h1>
    <div class="main">
        <ul class="nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="viewgallery.php">My Galleries</a></li>
            <li><a href="news.php">Trips And Updates</a></li>
            <li><a href="searchmyway.php">Search</a></li>
            <li><a href="aboutme.php">About Me</a></li>
        </ul>
        <div id="slideshow"> <img src="http://www.rajeevthomas.com/photo1.jpg" alt="Slideshow Image 1" align="middle" class="active" /> <img src="http://www.rajeevthomas.com/photo2.jpg" alt="Slideshow Image 2" /> <img src="http://www.rajeevthomas.com/photo3.jpg" alt="Slideshow Image 3" /> <img src="http://www.rajeevthomas.com/photo4.jpg" alt="Slideshow Image 4" /> <img src="http://www.rajeevthomas.com/photo5.jpg" alt="Slideshow Image 5" /> <img src="http://www.rajeevthomas.com/photo6.jpg" alt="Slideshow Image 6" /> <img src="http://www.rajeevthomas.com/photo7.jpg" alt="Slideshow Image 7" /> <img src="http://www.rajeevthomas.com/photo8.jpg" alt="Slideshow Image 8" /> <img src="http://www.rajeevthomas.com/photo9.jpg" alt="Slideshow Image 9" /> <img src="http://www.rajeevthomas.com/photo10.jpg" alt="Slideshow Image 10" /></div>
        <div class="intro">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan</p>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footinner">
        <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>
    <p class="footnote">All content and website by Rajeev Thomas. All rights reserved. All &copy; by Rajeev Thomas. </p>
</div>
</body>
</html>

Everything is put back in the flow apart from the nav which is offset to the right with absolute positioning. The nav is on its own so there’s no chance it will overlap.

The page is centred width a width and auto margins and aligned to your background, which means that you can open and close the window without things breaking unlike your original. Your background seems to be 40px out and therefore I have adjusted everything else by 40px but you should make the background exactly centred and remove the left:40px from the rules above.

I fixed the sticky footer routines although with a page that tall there really isnt much need for a sticky footer anyway.

I’m not sure I like the wasted space where the lamp image is as it looks nice but is just dead space. It would have been better to bring the footer on top of that image I would have thought - but that’s a design issue anyway.

Hope it helps anyway.:slight_smile:


<!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>
<script type="text/javascript" src="http://www.rajeevthomas.com/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 2800 );
});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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%;
}
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;
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
    margin:0;
    padding:0;
}
body {
    background:#0c0000 url(http://www.rajeevthomas.com/photos/1.jpg) no-repeat 50% 0;
}
html, body {
    min-width:860px
}

[COLOR=Sienna]How did you decide this minimum width? I am sorry if this is a very basic question....[/COLOR]

a {
    text-decoration: none;
    color: #ef6702;
}
a:visited {
    color: #ef6702;
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: none;
    color: #ffffff;
}
a, input {
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
}
img a img {
    padding:1px;
}
#slideshow {
    width:720px;
    height:480px;
    margin:auto;
    position:relative;
}

[COLOR=Sienna]Also here you have width and height...how did you determine that?[/COLOR]

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}
#header1 {
    text-align: left;
    padding:0 0 7x 0px;
    border-bottom: 1px solid #260101;
    height:146px;
    position:relative;
    overflow:hidden;
    border-top:400px solid #000;/* footer soak up */
}

[COLOR=Sienna]I tried this border before but it showed up on the top and pushed down the header... :rolleyes:[/COLOR]


#header1 span {
    width:520px;
    height:146px;
    position:absolute;
    left:0;
    top:0;
    background:url(http://www.rajeevthomas.com/photos/header-1-.png) no-repeat 0 0;
}
.main {
    width:860px;
    margin:auto;
    position:relative;
    left:40px;
}
.intro {
    font-family: "&#8216;Arial Narrow&#8217;", sans-serif;
    color: #e2c732;
    font-size: 15px;
    text-align:center;
    width: 600px;
    margin:auto;
    line-height: 22px;
    border-top:1px solid #4e4747;
    padding: 10px 0 0 0;
    clear:both;
}
.textarea {
    font-size:15px;
    width:260px;
    height:23px;
    background-color: #8c5535;
    border: 1px solid #401c14;
    padding:0;
    margin:5px 1px 10px 0x;
    text-align:left;
}
.buttons {
    padding: 3px 3px 23px 3px;
    margin:0px 0px 0px -3px;
    background-color: #401c14;
    border: none;
    color:#ff7302;
    font-size: 15px;
    height:23px;
}
.footer {
    height:92px;
    background: url(http://www.rajeevthomas.com/photos/2.jpg) no-repeat 50% 0;
    padding:307px 0 0 0;
    margin: auto;
    clear: both;
    font-size: 11px;
    text-align: center;
}

[COLOR=Sienna]I am really curious... why only 92 px and a large padding of 307 px(why not margin?) [/COLOR]

.footinner {
    width:100%;
    border-top: 1px solid #260101;
    text-align:center;
}
#seeker {
    font-size: 15px;
    padding: 10px 2px 2px 0px;
    background:#0d0004 url(http://www.rajeevthomas.com/photos/.jpg) no-repeat 0 0;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}
.footnote {
    font-size: 15px;
    padding:2px 0px 25px 0;
    background-color: #0d0004;
    color:#ff7302;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}
.link {
    margin:-97px 1px 157px 244px;
    padding:4px 0px 0px 3px;
    text-align: left;
    font-size: 17px;
}
.plinks {
    padding:10px 0px 0px 275px;
    margin:-40px 1px 5px 95px;
    text-align: left;
    font-size: 18px;
    color:#ff310b;
}
.limagePage {
    position:relative;
    left:95px;
    top:0px;
    width: 650px;
}
.limage {
    position:relative;
    padding:0px 0px 0px 0px;
    text-align: left;
    font-size: 18px;
    margin:-246px 0px 0px 251px;
}
.prev {
    margin:60px 0px 0px 160px;
    font-size: 30px;
    float:left;
    color:#FF0000;
}
.next {
    margin:-36px 0px 0px 1090px;
    font-size: 30px;
    float:right;
    color:#FF0000;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
.wrapper:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
.wrapper {
    min-height:100%;
    margin-top:-400px;
}
* html .wrapper {
    height:100%
}
.me {
    font-size: 14px;
    color:#ff7302;
}
ul.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    position:absolute;
    right:-100px;
    text-align:left;
}
ul.nav li {
    position: relative;
}
ul.nav li a {
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none;
    font-size: 15px;
    padding: 5px;
    color: #ef6702;
}
/* Fix IE. Hide from IE Mac \\*/
* html ul.nav li {
    float: left;
}
* html ul.nav li a {
    height: 1%;
}
/* End */
</style>
</head>
<body>
<div class="wrapper">
    <h1 id="header1">Rajeev Thomas Photography<span></span></h1>
    <div class="main">
        <ul class="nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="viewgallery.php">My Galleries</a></li>
            <li><a href="news.php">Trips And Updates</a></li>
            <li><a href="searchmyway.php">Search</a></li>
            <li><a href="aboutme.php">About Me</a></li>
        </ul>
        <div id="slideshow"> <img src="http://www.rajeevthomas.com/photo1.jpg" alt="Slideshow Image 1" align="middle" class="active" /> <img src="http://www.rajeevthomas.com/photo2.jpg" alt="Slideshow Image 2" /> <img src="http://www.rajeevthomas.com/photo3.jpg" alt="Slideshow Image 3" /> <img src="http://www.rajeevthomas.com/photo4.jpg" alt="Slideshow Image 4" /> <img src="http://www.rajeevthomas.com/photo5.jpg" alt="Slideshow Image 5" /> <img src="http://www.rajeevthomas.com/photo6.jpg" alt="Slideshow Image 6" /> <img src="http://www.rajeevthomas.com/photo7.jpg" alt="Slideshow Image 7" /> <img src="http://www.rajeevthomas.com/photo8.jpg" alt="Slideshow Image 8" /> <img src="http://www.rajeevthomas.com/photo9.jpg" alt="Slideshow Image 9" /> <img src="http://www.rajeevthomas.com/photo10.jpg" alt="Slideshow Image 10" /></div>
        <div class="intro">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan</p>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footinner">
        <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>
    <p class="footnote">All content and website by Rajeev Thomas. All rights reserved. All &copy; by Rajeev Thomas. </p>
</div>
</body>
</html>


Everything is put back in the flow apart from the nav which is offset to the right with absolute positioning. The nav is on its own so there’s no chance it will overlap.

[COLOR=DarkOrange]When I copied the code and pulled it up on the browser…it moved in to the left side and came over the dark frame of the background. Is it okay to change the “right:-100px;” and move it out? When I do that should I correspondingly change any other values?

What should I be careful about in aligning the other pages? Your code is very complex it seems like. Is there any general rules that I should pay attention to ? (Since you have seen my old code… what did do wrong? )[/COLOR]

The page is centred width a width and auto margins and aligned to your background, which means that you can open and close the window without things breaking unlike your original. Your background seems to be 40px out and therefore I have adjusted everything else by 40px but you should make the background exactly centred and remove the left:40px from the rules above.

How did you realize that it is a 40 px out? How can I see that?

I fixed the sticky footer routines although with a page that tall there really isnt much need for a sticky footer anyway.

I’m not sure I like the wasted space where the lamp image is as it looks nice but is just dead space. It would have been better to bring the footer on top of that image I would have thought - but that’s a design issue anyway.

I am thinking to add some links or smaller thumbnails there… not sure this idea is gonna work… :slight_smile:

Hope it helps anyway.:slight_smile: You are the best …cannot thank you enough…for your time…

How did you learn CSS so well? Can you point me in the right direction to learn CSS?

How did you decide this minimum width? I am sorry if this is a very basic question…

The black area of your centered backgroundi mage was 860px wide. See attachment rajeev1.jpg. I assumed that the layout was supposed to be centered within that block.

Also here you have width and height…how did you determine that?

That was the height and width of the images you were using in your slideshow.

I tried this border before but it showed up on the top and pushed down the header… :rolleyes:

You missed the negative top margin on the wrapper which draws the page up above the viewport to allow the footer to sit in place.

I am really curious… why only 92 px and a large padding of 307 px(why not margin?)

Margin pushes things away and you don’t want the footer pushed away. The padding top was the space for your big footer image and allowed the text to follow under the image.

When I copied the code and pulled it up on the browser…it moved in to the left side and came over the dark frame of the background. Is it okay to change the “right:-100px;” and move it out? When I do that should I correspondingly change any other values?

[COLOR=DarkOrange]

[COLOR=Black]I didn’t know where you wanted the nav because it was all over the place on my screen. You designed the layout to fit your screen width only and no one elses. It should fit for everyone.

Just adjust the right position to drag it into place. nothing else needs to be changed.
[/COLOR]

What should I be careful about in aligning the other pages? Your code is very complex it seems like. Is there any general rules that I should pay attention to ? (Since you have seen my old code… what did do wrong? )
[/COLOR]

The code is actually very simple :slight_smile:

It’s just a centered page using a width and auto margins and everything just follows logically unlike your page which was a mess of negative margins and absolute positioning. You don’t need to do anything in other pages as content will all fit within the element called .main.

It’s basically a centred page of 860px width.

The only complicated part was the sticky footer which I don’t think you really needed unless you have some pages with little content.

How did you realize that it is a 40 px out? How can I see that?

See the attachment rajeev1 and you can see that although the background image is centred the center portion is not centred in the viewport and needs moving over a bit.

[COLOR=DarkOrange]

I am thinking to add some links or smaller thumbnails there… not sure this idea is gonna work… :slight_smile:
[/COLOR]

Yes you can add thumnails there but then you would need to remove the top padding from the footer and create the height with the thumbnails div instead to preserve your background image.

Can you point me in the right direction to learn CSS?

Practice and more practice and just read through the forums and the sticky threads.:slight_smile:

Paul…
Thank you for you help…your patience is amazing…

In light of all your explanations I am looking at the code again to understand it better. Have questions again…:eye:
1)my background is 1440px wide, should I change the width of my body that big to show the entire background?
2)On what element we set the layout as it is centered? html,body? As I understand it looks like we center it on the html and body and then design everything else relative to that…is that correct?
3)When you said my original layout had many ‘negative margins and absolute positioning’ , is negative margin a bad idea? At what point do you use it ? And when do we use absolute positioning? For example I have 'next and ‘previous’ buttons to position that on both sides of the images… can I use absolute positioning?
4)Finally would you please share the name of the awesome tool you used to measure my screen width…?

Thank you…again…

Rajeev :slight_smile:

No 1440 px is too wide for a layout. Just let it slide off the side as I have done and then it stops at the content width which is only 860px width.

2)On what element we set the layout as it is centered? html,body? As I understand it looks like we center it on the html and body and then design everything else relative to that…is that correct?

The layout is centered by any element that has a width and then uses auto side margins. usually this was just be a page wrapper set to the required width and auto margins used.

However, your header was left aligned and 100% width so you didn’t want that centered it seems. Therefore instead of using a whole page wrapper to center the page the inner elements were centered (e.g. .main)

3)When you said my original layout had many ‘negative margins and absolute positioning’ , is negative margin a bad idea?

It’s only a bad idea when its not maintainable. If you have fluid text that is about 500px high and then you drag something else back up by 500px to match the text then that is not maintainable because if the text is changed or resized then the other element is mismatched.

You can use negative margins when they don’t rely on something else to match up. e.g. if you want to overlap something by 100px you can just drag it up by 100px.

Absolute positioning takes elements out of the flow and to get elements underneath the absolute elements you would need to use large margins to get past the fixed height absolute element. However if the absolute element is changed in size the margins no longer work properly and therefore is not maintainable. Floating the element and clearing the content ensures that no matter what height or size things are the content adjusts to suit.

At what point do you use it ? And when do we use absolute positioning? For example I have 'next and ‘previous’ buttons to position that on both sides of the images… can I use absolute positioning?

Yes this is a good time to use absolute elements because they won;t impact on the flow as the existing element is larger and controls the flow of the document.

4)Finally would you please share the name of the awesome tool you used to measure my screen width…?

Calipers. :slight_smile:

Thank you for your explanations…it makes so much more sense now… I also noticed ‘left’ instead of ‘left-margin’… this is something new to me!!! :slight_smile: I used and over-killed,left-margin concept!! :slight_smile: I think I should have used ‘left’ instead in most places. Thank you for the tool info… you are awesome! Thanks again…!

Yes don’t take much notice of that because it was a fix for your off centred background image. I used position:relative with a left position of 40px because the layout was already centred using auto margins which means you can’t add another 40px margin to it.

position:relative moves elements visually but not physically. They always preserve the space they already occupied so you won;t really have cause to use it unless there are special circumstances. Margins are fine for most of the normal things you want to do. :slight_smile:

Paul… hope you can help me again… :frowning: 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…

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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%;
}
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;
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
    margin:0;
    padding:0;
}
body {
    background:#0c0000 url(/photos/1.jpg) no-repeat 50% 0;
}
html, body {
    min-width:860px
}



a {
    text-decoration: none;
    color: #ef6702;
}
a:visited {
    color: #ef6702;
    text-decoration: none;
}
a:hover, a:focus {
    text-decoration: none;
    color: #ffffff;
}
a, input {
    outline-color: invert;
    outline-style: none;
    outline-width: medium;
}
img a img {
    padding:1px;
}
#slideshow {
    width:720px;
    height:480px;
    margin:auto;
    position:relative;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}
#header1 {
    text-align: left;
    padding:0px 0 7x 0px;
    border-bottom: 1px solid #260101;
    height:146px;
    position:relative;
    overflow:hidden;
    border-top:400px solid #000;/* footer soak up */
    left:0px;
    top:0;
}


#header1 span {
    width:520px;
    height:146px;
    position:absolute;
    left:0;
    top:0;
    background:url(photos/header-1-.png) no-repeat 0 0;
}
.main {
    width:860px;
    margin:auto;
    position:relative;
    left:40px;
}
.intro {
    font-family: "‘Arial Narrow’", sans-serif;
    color: #e2c732;
    font-size: 15px;
    text-align:center;
    width: 600px;
    margin:auto;
    line-height: 22px;
    border-top:1px solid #4e4747;
    padding: 10px 0 0 0;
    clear:both;
}
.textarea {
    font-size:15px;
    width:260px;
    height:23px;
    background-color: #8c5535;
    border: 1px solid #401c14;
    padding:0;
    margin:5px 1px 10px 0x;
    text-align:left;
}
.buttons {
    padding: 3px 3px 23px 3px;
    margin:0px 0px 0px -3px;
    background-color: #401c14;
    border: none;
    color:#ff7302;
    font-size: 15px;
    height:23px;
}
.footer {
    height:92px;
    background: url(/photos/2.jpg) no-repeat 50% 0;
    padding:307px 0 0 0;
    margin: auto;
    clear: both;
    font-size: 11px;
    text-align: center;
}

.footinner {
    width:100%;
    border-top: 1px solid #260101;
    text-align:center;
}
#seeker {
    font-size: 15px;
    padding: 10px 2px 2px 0px;
    background:#0d0004 url(http://www.rajeevthomas.com/photos/.jpg) no-repeat 0 0;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}
.footnote {
    font-size: 15px;
    padding:2px 0px 25px 0;
    background-color: #0d0004;
    color:#ff7302;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}
.link {
    margin:-97px 1px 157px 244px;
    padding:4px 0px 0px 3px;
    text-align: left;
    font-size: 17px;
}
.plinks {
    padding:10px 0px 0px 275px;
    margin:-40px 1px 5px 95px;
    text-align: left;
    font-size: 18px;
    color:#ff310b;
}
.limagePage {
    position:relative;
    left:95px;
    top:0px;
    width: 650px;
}
.limage {
    position:relative;
    padding:0px 0px 0px 0px;
    text-align: left;
    font-size: 18px;
    margin:-246px 0px 0px 251px;
}
.prev {
    margin:60px 0px 0px 160px;
    font-size: 30px;
    float:left;
    color:#FF0000;
}
.next {
    margin:-36px 0px 0px 1090px;
    font-size: 30px;
    float:right;
    color:#FF0000;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
.wrapper:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
.wrapper {
    min-height:100%;
    margin-top:-400px;
}
* html .wrapper {
    height:100%
}
.me {
    font-size: 14px;
    color:#ff7302;
}
ul.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    position:absolute;
    right:-100px;
    text-align:left;
    top:90px;


}
ul.nav li {
    position: relative;
}
ul.nav li a {
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none;
    font-size: 15px;
    padding: 5px;
    color: #ef6702;
}

ul.nav li a:hover {color:#FFFFFF;}



/* Fix IE. Hide from IE Mac \\*/
* html ul.nav li {
    float: left;
}
* html ul.nav li a {
    height: 1%;
}



#header1 span {
    width:520px;
    height:146px;
    position:absolute;
    left:0;
    top:0;
    background:url(photos/header-1-.png) no-repeat 0 0;
}
.main {
    width:860px;
    margin:auto;
    position:relative;
    left:40px;
}


.textarea {
    font-size:15px;
    width:260px;
    height:23px;
    background-color: #8c5535;
    border: 1px solid #401c14;
    padding:0;
    margin:5px 1px 10px 0x;
    text-align:left;
}
.buttons {
    padding: 3px 3px 23px 3px;
    margin:0px 0px 0px -3px;
    background-color: #401c14;
    border: none;
    color:#ff7302;
    font-size: 15px;
    height:23px;
}
.footer {
    height:92px;
    background: url(/photos/2.jpg) no-repeat 50% 0;
    padding:307px 0 0 0;
    margin: auto;
    clear: both;
    font-size: 11px;
    text-align: center;
}

.footinner {
    width:100%;
    border-top: 1px solid #260101;
    text-align:center;
}
#seeker {
    font-size: 15px;
    padding: 10px 2px 2px 0px;
    background:#0d0004 url(/photos/.jpg) no-repeat 0 0;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}
.footnote {
    font-size: 15px;
    padding:2px 0px 25px 0;
    background-color: #0d0004;
    color:#ff7302;
    width:725px;
    margin:auto;
    position:relative;
    left:40px;
}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
.wrapper:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}
.wrapper {
    min-height:100%;
    margin-top:-400px;
}
* html .wrapper {
    height:100%
}
.me {
    font-size: 14px;
    color:#ff7302;
}
ul.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    position:absolute;
    right:-140px;
    text-align:left;
    top:0px;
    z-index:1;
}
ul.nav li {
    position: relative;
}
ul.nav li a {
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none;
    font-size: 15px;
    padding: 5px;
    color: #ef6702;
}
/* Fix IE. Hide from IE Mac \\*/
* html ul.nav li {
    float: left;
}
* html ul.nav li a {
    height: 1%;
}

ul.nav li a:hover {color:#FFFFFF;}




th {
    
    font-weight: bold;
    text-align:center;
}

.c {
 background: #000;
 font-size: 12px;  
 text-align:left;  
 padding: 8px 90px 12px 90px;
 
}

.p {
 background: #000;
 font-size: 12px;  
 text-align:left;  
 padding: 8px 90px 12px 90px;

}

.searchPage {
    position:relative;
    padding: 10px 0px 0px 98px;
    width: 860px;  
}

.search {
    text-align:left;
    font-size: 15px;
	padding: 0px 2px 350px 80px;
	background-image: url("photos/.jpg");
	background-position: 0% 0%;
	background-repeat: no-repeat;
    
}

.searchresults {
 
 color: #999999;
 width:453px;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 font-size: 14px;  
 padding:0px 0px 0px 0px;
 
 
 
}

.searchText {
    font-weight: bold;
    font-style: italic;
    color:#FF6600;
    
}

.searchNumber{color: #FF6600;}

.image { 

padding: 20px 0px 10px 2px;
text-align:center;
}

p1 {

font-size: 17px;
padding:10px 1px 2px 0px;
color: #999999;
 
}

h5{

text-align:left;
padding:190px 1px 1px 0px;
font-size: 19px;
font-weight: bold;
color: #ef6702;
}


h4 {

padding:0px 1px 8px 20px;
font-size: 17px;
color: #FF6600
}


.style1 {
	font-size: 16px;
	font-weight: bold;
}

/* End */


</style>
</head>

<body>


<?php


            
            $results = "<div class=searchresults><h4>Search Results - </h4>
                <p1>Your search for <span class='searchText'>$q</span> returned <span class='searchNumber'>$num_rows</span> results </p1>
                
                <table>
                    <thead>
                        <tr>
                            <th class=p>Photo</th>
                            <th class=c>Caption</th> 
                            
                       </tr>
                    </thead>";


while($rows = mysql_fetch_assoc($sql)) {
                $results .= '
                <tr>
<td class=image><a href="viewgallery.php?cid='. $rows['photo_category']. '&pid='.$rows['photo_id'].'" /><img src="'.$images_dir. '/tb_'.$rows['photo_filename'].'" height=120px width=130px   /></a></td>
                    <td>'. $rows['photo_caption'] .'</td>
                    
                </tr>
                ';
            } 

         
         
        $results .= "</table></div>";                
        } else {
            
            $results = "<h3>Sorry, no results for <span class='searchText'>$q</span> were found";
        }
     
    
    
    
    
}

?>

<div class="wrapper">
    <h1 id="header1">Rajeev Thomas Photography<span></span></h1>
    <div class="main">
        <ul class="nav">
            <li><a href="index.php">Home</a></li>
            <li><a href="viewgallery.php">My Galleries</a></li>
            <li><a href="news.php">Trips And Updates</a></li>
            <li><a href="searchmyway.php">Search</a></li>
            <li><a href="aboutme.php">About Me</a></li>
        </ul>
<div class="searchPage">
<h5> Image Search Page -</h5>
<div class="search">
<form name="searchform" id="search" 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><!--search-->
<?php if(isset($_GET['form_id:search']) && (!empty($_GET['q']))) { 

echo $results;

 } else {
    $results  = '<h3>Please enter a search term</h3>';
}

?>

</div><!--searchPage-->
</div><!--main-->
<div class="footer">
        <p class="footnote">All content and website by Rajeev Thomas. All rights reserved. All &copy; by Rajeev Thomas. </p>
</div><!--"footer"-->
</div><!--wrapper-->
</body>
</html>

hi,

I’d need to see the actual html produced from view search and not the php. It looks as though you are outputting some results outside the page wrapper when you should be putting them inside a div in the page wrapper.

The footer should also be outside the page wrapper and not inside it.


        <!--searchPage-->
    </div>
    <!--main-->
</div>
<!--wrapper-->
<div class="footer">
    <p class="footnote">All content and website by Rajeev Thomas. All rights reserved. All &copy; by Rajeev Thomas. </p>
</div>
<!--"footer"-->
</body>
</html>


If I then remove the php then the page is fine apart from this large padding here:


.search {
    text-align:left;
    font-size: 15px;
   [B] padding: 0px 2px 350px 80px;[/B]
    background-image: url("photos/.jpg");
    background-position: 0% 0%;
    background-repeat: no-repeat;
}


350px bottom padding! I guess you may need it for a large image or something.

Everything must be inside the wrapper (apart from the footer) otherwise the routines will all be off by the amount of content that you have placed outside.

I’d really need oto see the live page though to debug further.

Paul… I was working on this as I got your reply. Thank you… http://rajeevthomas.com/searchmyway.php Here is the link. When you get to the search page, search for ‘light’ and you will get the results.

It looks good. But I don’t know what I did to the CSS is correct. I added that much padding to keep the footer down where it is now on the ‘search page’.

And on the ‘search result page’ I added a negative top margin to drag up the results. I am not sure if this is the right method. But IE8 shows a HUGE space under the footer.

This is a page where I can have any number of search results… I just want to design it in a way that if 50 images shows up as a result of a search, that shouldn’t affect the layout of the page.

Thank you Paul…

Hi,

As I mentioned above you have moved the footer inside the wrapper and it should be outside.

If you want to create some minimum height for the serach results then use min-height and not paddimg.

e.g.


.searchPage {
    position:relative;
    padding: 10px 0px 0px 98px;
    width: 860px;
[B]min-height:500px
}[/B]
.search {
    text-align:left;
    font-size: 15px;
    [B]padding: 0px 2px 0px 80px;[/B]
    background-image: url("http://rajeevthomas.com/photos/.jpg");
    background-position: 0% 0%;
    background-repeat: no-repeat;
}


I don’t see how the footer image is supposed to match the content above as there is always going to be a mismatch depending n the height of the page. I’m not really sure what effect you are going for there.

I tried simplifying the problem. Good for debugging…Try it and let me know:).

<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>CSS Alignment Problems</title>
    <style type="text/css" media="screen">
        body
        {
            background-color: gray;
            margin: 0px 0px;
            padding: 0px;
            text-align: center;
        }
        
        #slideshow
        {
            width: 720px;
            height: 480px;
            margin: auto;
            position: relative;
        }
        #slideshow IMG
        {
            /*position: absolute;
            top: 0;
            left: 0;*/
            z-index: 8;
        }
        
        #header1
        {
            text-align: left;
            padding: 0px auto;
            border-bottom: 1px solid #260101;
            height: 147px;
            position: relative;
            overflow: hidden;
            left: 0px;
            top: 0px;
            color: White;
        }
        
        #header1 span
        {
            width: 520px;
            height: 146px;
            position: absolute;
            left: 0;
            top: 0;
            background: url("/photos/header-1-.png") no-repeat;
        }
        .main
        {
            width: 860px;
            margin: 0px auto;
            position: relative;
            height: 800px;
        }
        .intro
        {
            font-family: "‘Arial Narrow’" , sans-serif;
            color: #00ff00;
            font-size: 15px;
            text-align: center;
            width: 600px;
            margin: 100px auto;
            line-height: 22px;
            border-top: 1px solid #4e4747;
            padding: 10px;
            clear: both;
        }
        .footer
        {
            height: 180px;
            background: url("/photos/2.jpg") no-repeat; /* Picture resolution should be reduced from 1440x306 to 800x170. Keep it under 900 if at all. */
            width: 800px;
            padding: 0px;
            margin: 5px auto;
            clear: both;
            font-size: 11px;
            text-align: center;
        }
        
        .footinner
        {
            width: 790px; /* 10px less than footer */
            margin: 0px auto;
            padding: 1px;
            border-top: 1px solid #260101;
            text-align: center;
        }
        #seeker
        {
            font-size: 15px;
            padding: 1px;
            background: #0d0004 url(/photos/.jpg) no-repeat; /* Looks like you're missing a picture filename */
            width: 780px; /* Another 10px down from footiner */
            margin: 0px auto;
            left: 40px;
        }
        .footnote
        {
            font-size: 15px;
            padding: 1px;
            background-color: #0d0004;
            color: #ff7302;
            width: 780px;
            margin: 0px auto;
        }
        
        .wrapper
        {
            width: 900px;
            margin: 0px auto;
            padding: 0px;
        }
        
        ul.nav
        {
            width: 140px; /* Feel free to adjust if you really need to */
            margin: 0px;
            padding: 0px;
            list-style: none;
            position: relative;
            left: 820px; /* Distance between Nav and center picture */
            text-align: left;
            top: 100px; /* Vertical position adjust if necessary */
            z-index: 1;
        }
        ul.nav li
        {
            position: relative;
        }
        ul.nav li a
        {
            font-family: Tahoma, Geneva, sans-serif;
            text-decoration: none;
            font-size: 15px;
            padding: 5px;
            color: #ef6702;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <h1 id="header1">
            Rajeev Thomas Photography<span></span></h1>
        <div class="main">
            <ul class="nav">
                <li><a href="index.php">Home</a></li>
                <li><a href="viewgallery.php">My Galleries</a></li>
                <li><a href="news.php">Trips And Updates</a></li>
                <li><a href="searchmyway.php">Search</a></li>
                <li><a href="aboutme.php">About Me</a></li>
            </ul>
            <div id="slideshow">
                <img src="http://www.rajeevthomas.com/photo1.jpg" alt="Slideshow Image 1" align="middle"
                    class="active" />
                <!-- You don't need align attribute positioning. #Slideshow IMG selector definition handles it through CSS.  Required due to doctype compliance with XHTML 1.0 Strict -->
                <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>
            <div class="intro">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris
                    pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula
                    eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl
                    fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan</p>
            </div>
        </div>
        <div class="footer">
            <div class="footinner">
                <form name="searchform" id="seeker" action="searchmyway.php" method="get">
                <!-- Similarly, name is not necessary.  ID is sufficient for both CSS settings and passing input from the form to a script for handling. Again, only because doctype is set to XHTML 1.0 Strict. -->
                <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>
            <p class="footnote">
                All content and website by Rajeev Thomas. All rights reserved. All &copy; by Rajeev
                Thomas.
            </p>
        </div>
    </div>
</body>
</html>

Paul… you helped me once more… thank you for that. I am gonna put it all together and will get back with you. xlTek… thank you for your time. I will test your code also. Thank you very much.:slight_smile:

Hi Welcome to the forum and thanks for contributing :slight_smile:

Just thought I’d let you know that you need to check the above code in IE6 and 7 as it is unusable at the moment. Be careful with relative positioning like that as it leaves gaps that can’t be filled.

However, you may be right in that a simpler layout may have been better rather than trying to integrate the sticky footer into the mix.:wink:

Paul O’B;4790640]Hi Welcome to the forum and thanks for contributing :slight_smile:

  • Thanks mate. Looking forward to making knowledge a two-way street with others on this board.:slight_smile:

Just thought I’d let you know that you need to check the above code in IE6 and 7 as it is unusable at the moment.

  • You’re absolutely right! I don’t even know what this looks like in other browsers. Hopefully my ideas are generic in nature. The end designer could/should customize these concepts as reflected through comments in the code and hopefully extrapolate his/her work to myriad of platforms.

Be careful with relative positioning like that as it leaves gaps that can’t be filled.

  • I am not sure if the issue is specific to gaps only or if there is more to it but I will take a stab at the gaps. If you’re referring to the gaps on the sides then certainly, you could use percentages rather than fixed sizes for widths and heights. In my wiew, you need to make a call from the the get-go in the design phase, whether to use one or the other and stick with it all the way through as much as possible. Few criteria to consider in making that choice:

[LIST=1]
[]Amount of distortion while vieweing content that is acceptable to you due to elongation or shrinkage.
[
]Amount of scrolling or side-gaps that is acceptable before you zero in on an ideal size for viewing.
[]An ideal resolution for viewing the content that youmight be targeting the most.
[
]Flexibility in resizing your pictures to the targeted resolution.
[/LIST] - Please feel free to share any others as I am certain there is more.

However, you may be right in that a simpler layout may have been better rather than trying to integrate the sticky footer into the mix.:wink:

  • The best approach from experience when your problem becomes overloaded. Merely divide to conquer or using process of elimination to address the problem at the root and take care of it.:slight_smile: