Web Page Alignment: Pls help

@xlokixFeb 22.2008

Here is the page im working with:

~~[url]~~http://www.electronics-expo.com/make-a-store/static/testing2/1.html[/url]

The site looks fine in Firefox but when you open it in Internet Explorer is shifts the whole thing to the very bottom of the page. I’m not quite sure why this is happening, and i can’t figure it out after many days of playing around.

to post a comment

HTML

12 Comments(s) _↴

@ray326Feb 22.2008 — #I like to start here.

@Frank62Feb 24.2008 — #X,

On line 374 you're starting with a whole new page within a page. That contains the table that is being displaced.

Also, Tidy Online (http://infohound.net/tidy/) says that on line 266 you are defining a <td> which already has been defined. Look for the blue i-signs in Tidy's report for this. (It furthermore found five errors.)

If that doesn't cure, check the available widths for the nested tables against the actual widths.

Finally, next time do not put 'Pls Help' in your title. That will make a number of viewers skip your post. It's just too dramatic, and we don't like that.

@xlokixauthorFeb 24.2008 — #i think the problem is that the link i showed you basically is a web page inside a web page. The Domain is made up of a header which surrounds the index, and then a footer on the bottom.

I know tables can become in an issue when dealing with frams so i decided to use css to recode the site. Here is the code im using (this is the index section of the site):

[code=html]
 <!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 name="generator" content=
 "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
 <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
 
 <title>Untitled Document</title>
 <link href="/mas_assets/theme/eexpo/css/header.css" rel="stylesheet" type="text/css" />
 <link href="Level1_Arial.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
 <div id="Header">
 <img src="/mas_assets/theme/eexpo/images//x1.jpg" width="601" height="151" />
 
 <div class="leftB" id="leftB"><img src="/mas_assets/theme/eexpo/images/x2.jpg" width=
 "218" height="385" /></div>
 
 <div id="rightB">
 <p>yyyyyyyyyyyy<br />
 hhhhhhhhhhhhhh<br />
 jshjhdkskjakkashk<br />
 sjakhdkja<img src="/mas_assets/theme/eexpo/images//x4.jpg" width="187" height=
 "189" /></p>
 </div>
 
 <div>
 kjhhhhdjduh
 </div>
 </div>
 
 <div id="mid"><img src="/mas_assets/theme/eexpo/images/x12.jpg" width="587" height=
 "397" /><br />
 <img src="/mas_assets/theme/eexpo/images/x5.jpg" width="201" height="256" /><img src=
 "/mas_assets/theme/eexpo/images/x6.jpg" width="195" height="256" /><img src=
 "/mas_assets/theme/eexpo/images/x7.jpg" width="203" height="256" /></div>
 </body>
 </html>[/code]

Still it displays fine Firefox but in Internet Expolorer 6.0 is pushes everything to the bottom

(Note. Sorry about the "pls help ")

@Frank62Feb 24.2008 — #X.,

If you wanna load a complete page (with header and stuff) into a page, you have to use frames. Regular frames or an iframe.

Sorry to say, but the code you gave is useless to ask help for. Just put it into your HTML editor (Source tab) and click Preview, to see for yourself.

@xlokixauthorFeb 25.2008 — #well thats because it references a css style sheet that i did not include. and why would i put this into a frame. I'm working on a web site that has already been created with frames it has a header an index and a footer. The part i need to add to the site is going to reside in the index(or as a new index if you will). Why would i put that in a frame?

http://www.globalspecialtyproducts.com/testing/xcss.html Try going here i uploaded the page to a different server this is what the page would look like if it was loose and not inside the header frame.

@CentauriFeb 25.2008 — #The site linked to in the first post DOES NOT use frames. If you have a "template" containing the header, menu, ad bars, footer etc, and you want to insert the content section manually, you [B]DO NOT[/B] cut and paste an entire separate page in there - the inserted code should [B]NOT[/B] contain any doctype, <head> or <body> section tags, css links etc - JUST the coding (ie. the divs)

@xlokixauthorFeb 25.2008 — #I took out all tags like your said and doc type and here is what i have (open in IE6 to understand what i mean )

http://www.electronics-expo.com/make-a-store/static/testing3/1.html

To be honest with you i was just given this job and their asking me to intergrate somethings into there site. The "template" isn't just 1 html it's a :

header.html that surrounds the index.html on the top, left and right sides.

In addition to this is a footer.html that resides below all this.

Even after doing everything like you said, in Internet Explorer 6 it still shifts the whole site down, but for some reason works flawlessly in every other browser

Here is the code made with your changes:

<link rel="stylesheet" type="text/css" href="/mas_assets/theme/eexpo/css/xtecs.css" />

<script type="text/javascript" src="/mas_assets/theme/eexpo/js/prototype.js"></script>

<script type="text/javascript" src="/mas_assets/theme/eexpo/js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="/mas_assets/theme/eexpo/js/frog.js"></script>

<table width="601" height="824" border="0" valign="top">

<tr>

<td height="98" colspan="2" valign="top"><a href="http://www.electronics-expo.com/make-a-store/static/testing2/1.html"><img src="/mas_assets/theme/eexpo/images/x1.jpg" width="601" height="151" border="0" /></a></td>

</tr>

<tr>

<td width="221" height="222" valign="top" rowspan="2"><img src="/mas_assets/theme/eexpo/images/x2.jpg" width="218" height="385" border="0" usemap="#x2_Map" />

<map name="x2_Map">

<area shape="rect" alt="" coords="0,322,218,374" href="http://www.electronics-expo.com/make-a-store/static/testing4/1.html">

<area shape="rect" alt="" coords="0,262,217,308" href="">

<area shape="rect" alt="" coords="0,205,217,250" href="#">

<area shape="rect" alt="" coords="0,128,218,183" href="http://www.electronics-expo.com/make-a-store/static/testing3/1.html">

<area shape="rect" alt="" coords="0,65,217,116" href="#">

<area shape="rect" alt="" coords="0,15,218,57" href="#">

</map></td>

<td width="376" valign="top"><p class="style7"><img src="/mas_assets/theme/eexpo/images/x3.jpg" width="229" height="165" align="right" />

From a simple plasma <br />

installation to constructing a complete custom home theater room, our design <br />

and custom installation <br />

teams will make sure that you fully enjoyyour <br />

new equipment</p> </td>

</tr>

<tr>

<td valign="top">

<p class="style7"><img src="/mas_assets/theme/eexpo/images/x4.jpg" width="187" height="189" align="left" />

Expo’s CEDIA

CertifiedDesign

and Home Installation

Service Team,Xtecs,

specialize in Custom

Design,Sales and Installation

of Home Theaters,

HD Flat Panel TVs, Home

Automation, Distributed

Audio & Video and Interior

Design. Come in today to

see what our installation

team can do for you!</p></td>

</tr>

<td height="300" colspan="2" valign="top"><div id="FrogJS" class="box_gray bigbox">

<a href="/mas_assets/theme/eexpo/images/xtecs/1.jpg" title="Xtec System: 16E" rel="http://portfolio.statenews.com/users/Jolie_Myers/">

<img src="/mas_assets/theme/eexpo/images/xtecs/1_thumb.jpg" alt="An attendee of Rabbi Mordechai Haller read the Megillah to a group including about 15 MSU students who would blot out the name Haman using noisemakers each time it was read." /> </a>

<a href="/mas_assets/theme/eexpo/images/xtecs/2.jpg" title="Xtec System: 12B">

<img src="/mas_assets/theme/eexpo/images/xtecs/2_thumb.jpg" alt="Junior wide receiver Terry Love is taken down by Illinois safety Kyle Knezetic September 30 at Spartan Stadium. The Fighting Illini beat the Spartans, 23-20, with a fourth-quarter field goal scored in the last 20 seconds of the game." /> </a>

<a href="/mas_assets/theme/eexpo/images/xtecs/3.jpg" title="Xtec System:12B" rel="http://portfolio.statenews.com/users/Jolie_Myers/">

<img src="/mas_assets/theme/eexpo/images/xtecs/3_thumb.jpg" alt="Redshirt senior defenseman Greg Janicki fights for ball control against Wisconsin forward Eric Conklin September 24 at Old College Field." /> </a>

<a href="/mas_assets/theme/eexpo/images/xtecs/4.jpg" title="Xtec System:15E">

<img src="/mas_assets/theme/eexpo/images/xtecs/4_thumb.jpg" alt="Kevin Bozeman performs his comedy routine at Connxtions Comedy Club in Lansing shortly after the death of Richard Pryor. Bozeman said Pryor influenced all comedians, not just black performers." /> </a>

</div></td>

<tr>

<td height="135" colspan="2" valign="top"><center><img src="/mas_assets/theme/eexpo/images/x12.jpg" width="587" height="397"></center></td>

</tr>

<tr>

<td height="67" colspan="2" valign="top"><img src="/mas_assets/theme/eexpo/images/x5.jpg" width="201" height="256" /><img src="/mas_assets/theme/eexpo/images/x6.jpg" width="195" height="256" /><img src="/mas_assets/theme/eexpo/images/x7.jpg" width="203" height="256" /></td>

</tr>

</table>

@CentauriFeb 26.2008 — #These two style rules

[CODE]* html .auth_dealer{
 margin-left: 20px;
 margin-bottom:5px;
 }
 
 *html .right_column{
 margin-left:15px;
 }[/CODE]

add extra left margins and force the right column too wide in IE, so the centre content no longer fits. I have no idea why those rules are there, but they can be deleted.

As Ray tried to say earlier in this thread, always validate the page.

Oh, and by the way, this would be much easier to debug if it weren't for all that damn table crap....

@xlokixauthorFeb 26.2008 — #where did you find those styles. I'm not even using any internal css styles in the code i posted...(i apologize and thank you for you patience with me i am a bit of a novice.)

@CentauriFeb 26.2008 — #where did you find those styles.[/QUOTE]

In the eexpo.css file.

@xlokixauthorFeb 27.2008 — #That actually did allow it to work in IE6, only problem is the right side of the header.html loses its table attributes(by this i mean the greay rounded rectangles that each category sits on top of)

I don't know why deleting those lines, would have an effect on the rounded grey boxes but it certainly causes a change to the site. It may be possible that it's just because it takes a little bit for the web site to refresh it self....as soon as i saw it do this i instantly put it back the original way it was.

What do you think ?

@xlokixauthorFeb 27.2008 — #nm i deleted an extra } that i shouldn't have. Thank you for your help that did work. Normally i would have more knowledge in this area, it's just that i got thrown into this new website projecy which was not created by me. I was hired to update/maintain till they actually get a programmer.

Thank you again.

Also in #HTML _↴

Hide Cursed IE Tooltip Wondering what i did to make mu Enter / exit button UNclickable Hide the Drop-box

Success!

Help @xlokix spread the word by sharing this article on Twitter...

Tweet This

Web Page Alignment: Pls help

12 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Web Page Alignment: Pls help

12 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #HTML _↴