Aligning correctly in all the browsers

HTML & CSS
21

I was just saying be careful with relative positioning - generally.:slight_smile:

You’ll find that beginners tend to latch on to it but do not understand the consequences. Relative positioning moves an element visually but not physically. The space the element previously occupied is always preserved in the flow which is why there will be gaps such as when you moved the nav with top:100px. The result will be that there will be a 100px hole in the page that content won’t fill unless you do something about it. Sometimes that may be what you want of course.:slight_smile:

The issue in IE6 and 7 in your code can be fixed simply by adding the following.


.main {
    width: 860px;
    margin: 0px auto;
    position: relative;
    height: 800px;
    [B]text-align:left;[/B]
}

The text-align:center on the body will cause IE7 and under (even when in standards mode) to center block level elements in error. Then when you add position:relative left:620px to that nav element will be offset from that central position and end up most likely outside the viewport.

Simply resetting the text-alignment to left on a parent will fix the bug.

22

In fact, if IE5 compatibility is expected in browser mix, this addition is required due to the “text-align:center” rule for the top container.:slight_smile:

Cheers,

23

Paul… thank you for helping me so far.

I have one problem in IE6. The navigation list comes undone and shows up on the top of the slide show as a horizontal line, instead of a vertical navigation list. Please see picture below? Does this have something to do with the width of the page?

When you mentioned " 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." This doubt comes from my inability to explain it well. Min-height really takes care of the problem here. When a user searches and gets results on that page, it shows up like below…http://rajeevthomas.com/searchmyway.php?q=light&Submit=Search&form_id%3Asearch=1. Because min-height or padding I used before the results showed up on the bottom of that padding. So I used a negative margin to bring that up. I am not sure if that’s the correct method. I still have trouble understanding the padding , margin concept. I am not really sure of when to use this and when not to… :frowning:

24

That’s caused by the IE hack which doesn’t seem to be needed now.

Remove this:


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

Padding is the space inside an element. It goes between the elements border and the elements content.

Margin is the space outside the element. It is outside the elements border and creates space between the border edge of other elements. margins will collapse with other margins in certain cases. Padding never collapses.

26

I don’t see why you have the large min-height on .intro.


.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: 0px 0 0 0;
    clear:both;
[B]    /*min-height:750px;*/
[/B]}

All that does is make the page far to tall. There seems to be no need for it as the content would automatically increase the height anyway.

27

You are right about the min-height on the ‘intro’ page. I was just experimenting with it. I changed it now. It is 7:14 am here in USA and I haven’t slept all night because I had a .png image problem, I fixed it with the helix .png fix just now :slight_smile: I am a total newbie so I am happy. Your navigation fix really did the magic. I was able to fix the ‘search results’ without negative margin :slight_smile: All in all a good night, thank you for that Paul…

28

Get some sleep now :slight_smile:

29

Paul… I am in trouble again… my last page that I need to fix, I am mostly able to align it properly. What I want to do is that align the date, month and year by the dark frame of the page(on the left…) But IE6 really shifts it to ‘left’…can you please take a look…? :slight_smile:

Here is the link… http://www.rajeevthomas.com/news.php

Thank you Paul…

30

Hi,

The problem is that you have put .npost with a 850px width and 150px left padding yet its parent container is only 760px wide. IE6 will always stretch a container to accommodate its content and therefore puts everything out of sync.

Try something like this:


.npost {
    padding:10px 0px 100px 150px;
    text-align: left;
    font-size: 15px;
[B]    margin-right:-150px;
    position:relative;[/B]
}
.npost{zoom:1.0}
31

Paul…this really fixed the problem… but I have questions about that solution. How does zoom work? Why zoom here? margin-right=-150px was that added to counteract to the 150 padding? Why add zoom property to a separate CSS statement and why not write it under position relative?..

Thank you Paul… I know I asked a lot of questions… the site is almost done now… thank you very much…:slight_smile:

32

zoom is a proprietary (invalid) IE property which could actually zoom elements larger if you wanted but we all use it because of its ability to add “haslayout” to an element without having to use the heigh:1% hack or other haslayout triggers than may affect the design in some way.

Elements that hold more than simple content need haslayout and you can read about it in the reference for a longer explanation.

Why zoom here? margin-right=-150px was that added to counteract to the 150 padding? Why add zoom property to a separate CSS statement and why not write it under position relative?..

haslayout is needed because this is a complicated element in a complicated situation and the element needs to take full care of itself and in iE7 and under only elements in haslayout mode are reliable.

The negative margin was used to increase the width of the element so that it could break out of the parents width without actually stretching the parent as width would have done. Negative margins are useful for this.

The zoom could be applied in the original rule but it’s nice to separate the hacks and only give it them to the browser that needs them as it makes removing them much easier in the future when they are no longer needed.

Hacks should be ugly and should stand out.

33

Paul… every post of yours is a learning experience. I thought I have most of the problems under control… I looked at two pages that I have in light of your last reply. But These two still shifts in IE alone… I cannot figure out where am I adding the extra width/padding/margin on these pages… is this a behavior of IE I am not familiar of?

http://www.rajeevthomas.com/viewgallery.php?cid=1

http://www.rajeevthomas.com/viewgallery.php?cid=1&pid=289

Both of these pages… shifts to the left… I cannot affect it with anything to get it to work in IE6… :frowning:

I saw that when you used the negative margin before… ( "The negative margin was used to increase the width of the element so that it could break out of the parents width without actually stretching the parent as width would have done. Negative margins are useful for this. " ) you have used a negative margin of -150. The figure 150… was that used because the padding was also 150? I hope this makes sense…

I am not sure how to thank you…

34

I’ve just seen your post but I’m just heading out the door for the rest of the day but I’ll come back and have a look later this evening when I get back - unless someone else chimes in first :slight_smile:

35

Enjoy your day… :slight_smile:

36

Hi,

The main issue is that the offset nav produces a horizontal scrollbar and the background image on the body stops sliding to the left in ie6 but the content does not when the page is resized smaller.

If you move the image from the body and onto the wrapper it should stay in sync better.

You also have a malformed table with missing tags and some extra div tags thrown in the mix.

I’ve tried to tidy it up a bit but there’s too many changes to document.


<!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;
}
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;
}
#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;
    behavior: url(http://www.rajeevthomas.com//iepngfix.htc);
}
.cname {
    font-size: 19px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 50px;
}
.caption {
    font-size: 20px;
    color: #ff0000;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 10px 0px 10px 0px;
}
.excerpt {
    font-size: 18px;
    color: #ffffff;
    width: 450px;
    background-image: url(http://www.rajeevthomas.com/photos/.jpg);
    border-top:1px solid #2c2c2c;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 10px 0px 0px 0px;
}
.thumbsPage {
    position:relative;
    top:10px;
    margin:0px;
    text-align:left;
    padding:0px 0px 400px 20px;
    min-height:550px;
    color:#fff;
}
* html .thumbsPage {
    zoom:1.0;
    height:550px
}
.thumbs {
    text-align:left;
    margin:10px auto 0;
}
.thumbsPage img {
    border: 1px solid #3a1c11;
    padding: 8px; /*Inner border size*/
    background: #000000; /*Inner border color*/
}
.thumbs td {
    padding:10px;
    vertical-align:middle;
}
.link {
    padding:0px 0px 0px 10px;
    text-align:left;
    font-size:19px;
}
.plinks {
    padding:0px 0px 0px 0px;
    text-align: left;
    font-size: 18px;
    color:#ff310b;
}
.limagePage {
    width: 860px;
    min-height:900px;
}
.limage {
    left:0px;
    text-align: left;
    font-size: 18px;
    margin:0px;
    position:relative;
    left:20px;
    padding:0px 0px 0px 10px;
}
.limage {
    zoom:1.0
}
.llink {
    padding:0px 0px 0px 10px;
    text-align:left;
    font-size:19px;
}
.prev {
    margin:0px;
    font-size: 50px;
    float:left;
    color:#FF0000;
    text-align:left;
    padding: 0px;
    position:absolute;
    left:-70px;
    top:300px;
}
.next {
    margin:0px;
    padding:0px;
    font-size: 50px;
    color:#FF0000;
    text-align:right;
    position:absolute;
    right:-75px;
    top:295px;
}
.cpage {
    position:relative;
    margin:0px;
    text-align: center;
    padding:0px 0px 0px 100px;
    min-height:700px;
    height:auto !important;
    height:700px;
    margin-right:-20px;
}
.categoryview {
    width:600px;
}
.cpage img {
    border: 1px solid #793b22;
    padding:5px;
}
#seeker {
    font-size: 15px;
    padding: 10px 2px 2px 0px;
    width:725px;
    margin:auto;
    position:relative;
}
.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(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;
    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;
    text-align:left;
    background: url(http://www.rajeevthomas.com//photos/1.jpg) no-repeat 50% 400px;
}
* html .wrapper {
    height:100%;
}
.me {
    font-size: 14px;
    color:#ff7302;
}
ul.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    float:right;
    margin-right:-180px;
    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;
}
ul.nav li a:hover {
    color:#FFFFFF;
}



/* End */
</style>
</head>
<body>
<div class="wrapper">
    <h1 id="header1"><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="thumbsPage">
            <p class="link"><a href=viewgallery.php>Albums</a><font color=white> >&gt </font><a href=viewgallery.php?cid=1>Abstract</a></p>
            <p class="des">Love at first it was when I saw Colorado!</p>
            <table class="thumbs">
                <tr>
                    <td><a href='viewgallery.php?cid=1&pid=289'><img 
    src='http://www.rajeevthomas.com/photos/tb_289.jpg' alt='GJGJFJSJSJS' /></a></td>
                    <td><a href='viewgallery.php?cid=1&pid=287'><img 
    src='http://www.rajeevthomas.com/photos/tb_287.jpg' alt='GSJSJSJSJS' /></a></td>
                    <td><a href='viewgallery.php?cid=1&pid=288'><img 
    src='http://www.rajeevthomas.com/photos/tb_288.jpg' alt='GSJSJSJSG' /></a></td>
                </tr>
                <tr>
                    <td><a href='viewgallery.php?cid=1&pid=285'><img 
    src='http://www.rajeevthomas.com/photos/tb_285.jpg' alt='GJSJGSJSJS' /></a></td>
                    <td><a href='viewgallery.php?cid=1&pid=286'><img 
    src='http://www.rajeevthomas.com/photos/tb_286.jpg' alt='GJSJSJSJ' /></a></td>
                    <td><a href='viewgallery.php?cid=1&pid=283'><img 
    src='http://www.rajeevthomas.com/photos/tb_283.jpg' alt='YJR6YUGFJDGDGJGF' /></a></td>
                </tr>
                <tr>
                    <td><a href='viewgallery.php?cid=1&pid=284'><img 
    src='http://www.rajeevthomas.com/photos/tb_284.jpg' alt='GFSJSGJJSGJGSG' /></a></td>
                    <td><a href='viewgallery.php?cid=1&pid=281'><img 
    src='http://www.rajeevthomas.com/photos/tb_281.jpg' alt='76378368368' /></a></td>
                    <td><a href='viewgallery.php?cid=1&pid=282'><img 
    src='http://www.rajeevthomas.com/photos/tb_282.jpg' alt='GJSGJSJJSGJSJ' /></a></td>
                </tr>
            </table>
        </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>

It’s probably best if you run the above code (while online) to see if its doing what you want before you implement the changes. I removed some divs and applied the class to the table itself and removed the outer table.

I move the body background image on to #wrapper instead. I also changed two of the divs to p elements and coloured the text so that it shows. There are probably a few other odd changes in there also. :slight_smile:

37

Paul… I am gonna sit down and wrap my head around all the new ideas… thank you so much for your patience… :slight_smile:

38

Paul…adding background to the wrapper solved ALL my browser shifts…(and I need to work on my php produced tables…I know that is going to a project of its own…! ) But I have a new phenomenon that cuts off the background right before the navigation menu…see attached… should I add a width to the wrapper to avoid background cutting off ?

39

Hi,

I think that problem was always there and is caused by the nav extending outside of the page. In order for the background to be visible when scrolled to (which is what I assume you are doing to get that effect) then the page must be held open at that width to start with.

You would either have to set a min-width equal to the width of the page + nav (1440px) or a fixed width as you seem to have done already. However that seems too big a page for me and maybe you should re-think that hanging menu. Maybe remove the negative margin and place it inside the layout.

It’s a simple mathematical principal and if the window is only 860px wide then any background outside of that 860px will be missing when you scroll to it because it is greater than the viewport width. The viewport needs to be as wide as the largest element when you want all backgrounds to show when being scrolled horizontally to them.

It’s a bit of a conundrum.

40

Paul… everything seems to be in place… You made me laugh when you said ‘it is bit of a conundrum’ because I think this whole website making has been a conundrum for me… :smiley: with your help I am getting somewhere and learning a lot… but I would like to reduce the size of this page as you suggested it. I have to ask you what is considered as ‘reasonable’ size?

This is just a minor thing… but would like to see the vertical pictures in the middle of the dark frame than the left side of the frame as it is now. How do I achieve that? Does this require a major change in the layout…?

http://www.rajeevthomas.com/viewgallery.php?cid=1&pid=283