Sticky footer help and resoultion help

Whtever u explained bt dimension went over my head. Sorry :frowning:

lol - No problems :slight_smile:

Just make those changes I showed above and the footer should show correctly and not force a vertical scrollbar until needed - which may allow the layout at full screen view on 1280px not to have a scrollbar.

However your best bet is to reduce the overall size of your layout by about 30px.

Thank u paul. i read that again n again n now i got it. so no scroll comes now. but i saw my pages in IE and they look hideous. the whole layout is broken but in FF they r ok. if u see this http://ammardesigns.com/sandbox/cellsites/ on IE. and open each page individually u will see. how can i fix it?

Unfortunately I’m not around much today so I don’t have much time so hopefully someone else will jump in.:slight_smile:

I have already given you fixes for iE6 for most of these issues anyway but you never seem to add them in. You still haven’t added the routine I mentioned above for the 100% height for ie6 and you haven’t used the corner routines I gave you many weeks ago that fixed ie6.

Rather than just show us your directory and say fix this site you should post one page at a time only. Then you should explain what the problem is on that page and how you want it to look as its not always obvious.

It seems you have different coloured corners hanging around at the bottom in mid air which doesn’t help identify where you want them. I couldn’t tell if there were supposed to be two light blue corners at the bottom of the big main box or whether you wanted one corner to the right of that box and the other dark blue corner on the footer?

The dark blue corners end at blue box bottom corners. n light blue corners end at blue rounded ends.

ok here is it http://ammardesigns.com/sandbox/cellsites/SiteSearch.php if u see it in IE its so broken and hideous can u tell me how to fix it with proper alignment

Hi, I don’t see it hideous in IE. It actually looks identical to firefox (IE6/7 I mean)

Have you fixed it?

I can’t see any problem in IE6 either - It certainly doesn’t look hideous :slight_smile:

thats a IE 8 Screenshot. its the same page as before. it shows correct in FF and IE 6 as i tried but in IE 8 its so messed up :mad:

Better be after putting a week into this site :smiley:

The <ul> just needs to clear the top right element


#tabholder{clear:right;}

IE8 ? No one mentioned IE8 before :slight_smile:

Edit:

I see Ryan has already addressed the clearing issue but the code below will still make it more solid

I notice you still haven’t added the footer code I gave you despite me telling you to do so a number of times. Is there really any point in giving you answers if you don’t use them as the problems will just overlap.

The problem in IE8 is already one I addressed a long time ago when I told you its better to float columns and not use margin-left techniues because you will run into clearing issues.

You need to wrap all that right content in a float of suitable width.


.outer {
    width:1074px;
    float:right;
}



<div id="wrapper">
    <div id="header">
        <div class="MainNav"><a href="#">Telecompass</a> > <a href="#">OCMS</a> > Site</div>
        <div class="SubNav"><a href="#">LOG OUT</a></div>
    </div>
    <!--header div ends-->
    <div class="submenu">
        <ul id="sidemenu">
            <li id="active"><a href="#">Sites</a></li>
            <li><a href="#">Inventory</a></li>
            <li><a href="#">Electricity</a></li>
            <li><a href="#">PM</a></li>
            <li><a href="#">Fuel</a></li>
            <li><a href="">Consumables</a></li>
            <li><a href="">Work Orders</a></li>
        </ul>
        <div class="plc-logo"></div>
    </div>
   [B] <div class="outer">[/B]
        <!--submenu div ends-->
        <ul id="tabholder-light">
            <li id="current"><a href=""><span>Search</span></a></li>
            <li><a href=""><span>Add a Site</span></a></li>
        </ul>
        <div class="search-box">
            <div class="rightcorner-lite">
                <!-- corners-->
            </div>
            <table width="98&#37;" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="963" height="20">&nbsp;</td>
                </tr>
                <tr>
                    <td><table width="99%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="10%">&nbsp;</td>
                                <td class="txt">Site ID</td>
                                <td><label>
                                    <input name="textfield5" type="text" class="txtfield-blue" id="textfield5" />
                                    </label></td>
                                <td width="5%">&nbsp;</td>
                                <td class="txt">Type</td>
                                <td><input name="textfield6" type="text" class="txtfield-blue" id="textfield6" /></td>
                                <td width="10%">&nbsp;</td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td class="txt">Status</td>
                                <td><input name="textfield4" type="text" class="txtfield-blue" id="textfield4" /></td>
                                <td>&nbsp;</td>
                                <td class="txt">Priority</td>
                                <td><input name="textfield7" type="text" class="txtfield-blue" id="textfield7" /></td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td class="txt">Site Name</td>
                                <td><input name="textfield3" type="text" class="txtfield-blue" id="textfield3" /></td>
                                <td>&nbsp;</td>
                                <td class="txt">Address</td>
                                <td><input name="textfield8" type="text" class="txtfield-blue" id="textfield8" /></td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td class="txt">Category</td>
                                <td><input name="textfield2" type="text" class="txtfield-blue" id="textfield2" /></td>
                                <td>&nbsp;</td>
                                <td class="txt">City</td>
                                <td><input name="textfield9" type="text" class="txtfield-blue" id="textfield9" /></td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td class="txt">Region</td>
                                <td><input name="textfield" type="text" class="txtfield-blue" id="textfield" /></td>
                                <td>&nbsp;</td>
                                <td class="txt">&nbsp;</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                        </table></td>
                </tr>
                <tr>
                    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="80%">&nbsp;</td>
                                <td><input type="button" value="Search" class="buttons" /></td>
                                <td width="10%">&nbsp;</td>
                            </tr>
                        </table></td>
                </tr>
            </table>
            <div class="leftbottom-search"></div>
            <div class="rightbottom-search"></div>
        </div>
        <ul id="tabholder">
            <li id="current"><a href=""><span>Search Result</span></a></li>
        </ul>
        <div class="result-box">
            <div class="resultbox"></div>
        </div>
    </div>
</div>
<div class="footer"></div>


You must be consistent and logical in your approach and you must use the fixes we give as it is rather annoying to see the same errors in the code that we have fixed more than several times now :slight_smile:

Thank u paul and Ryan u been too helpful in solving the problems, my css concepts r too weak especially position n float. I will try the code tomorrow though I have one problem left in pmScheldule in www.am
ardesigns.com/Sandbox/pm/ as the layout is too big I wanna trim in down.
Btw Paul u did put sense into me on sticky footer :stuck_out_tongue: I read it so much finally I got it! Though I was annoying. Sorry :stuck_out_tongue:

I assume you meant this link
http://www.ammardesigns.com/sandbox/pm/pmSchedule.php

I’m viewing in IE6/7/8

What exactly do you want “trimmed down”

U see the bottom corners? there it shld end, somehow I want the designed trimmed, is it prossible?

I already answered this in the other thread …

That’s making them sit on corners right? But I wanna trim down my tables to the point where the corners shows n I dnt know raw HTML :frowning:

The corners are showing, just a but further up the page, which I explained is that you are using top:753px or w/e the value is.

I’m a bit confused, if you want hte corners to appear different change the value/nest them different. Where exactly do you want hte corners placed? Right now they show a little bit from the bottom (a little upwards I mean)

i think there is lot of trouble b.w programmers and designer. the programmer blames the designer that ur making inline styles for every corner dependencies etc

Paul i had that logic in back of mind of container and i did experiment with it the output was as seen in screenshot of in ie 8. the tabs are not aligned to the corners. as tabholder-light got padding-left:16px and if i do it 0 the tab r aligned but disturbed in other layouts :frowning: http://ammardesigns.com/sandbox/cellsites/SiteSearch.php

i fixed it weeeeee :slight_smile: i did inline style next to tabholder and tabholder-light and gave them padding-left:0px its fixed