IE HTML Bug?

Reply Subscribe

Thread Tools

Search this Thread

31 January 2006, 11:55 PM

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

IE HTML Bug?

Hi,

doing a custom HTML page in Ebay - looks perfect on my Mac under Safari but the page get's elongated horizontally in IE 6. The right nav bar doesn't show correctly!

WHat's wrong in my html? It's taken from a Dreamweaver template so can't see there being anything wrong - most likely MS IE messing things up again !!

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="2col_rightNav.css" type="text/css" />
</head>

<body>
<div id="masthead">
<h1 id="siteName">Site Name</h1>
<div id="globalNav"> <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> </div>
</div>

<div id="content">
<div id="breadCrumb"> <a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> / </div>
<h2 id="pageName">Page Name</h2>
<div class="feature"> <img src="" alt="" width="280" height="200" />
<h3>Feature Title</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
</div>
<div class="story">
<h3>Story Title</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
</div>
<div class="story">
<h3>Story Title</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>
</div>
</div>

<div id="navBar">
<div id="search">
<form action="#">
<label>search</label>
<input name="searchFor" type="text" size="10" />
<input name="goButton" type="submit" value="go" />
</form>
</div>
<div id="sectionLinks">
<ul>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
<li><a href="#">Section Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div class="relatedLinks">
<h3>Related Link Category</h3>
<ul>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
<li><a href="#">Related Link</a></li>
</ul>
</div>
<div id="advert"> <img src="" alt="" width="107" height="66" /> Ad copy ad copy ad copy. Ad copy ad copy. </div>
<div id="headlines">
<h3>Headlines</h3>
<p> Headline <a href="#">full story...</a> </p>
<p> Headline <a href="#">full story...</a> </p>
<p> Headline <a href="#">full story...</a> </p>
<p> Headline <a href="#">full story...</a> </p>
</div>
</div>

<div id="siteInfo"> <img src="" width="44" height="22" /> <a href="#">About Us</a> | <a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | ©2003 Company Name </div>
<br />
</body>
</html>

My CSS File is :

/***********************************************/
/* 2col_rightNav.css */
/* Use with template 2col_rightNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

a:link, a:visited, a:hover {
color: #006699;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
font-family: Arial,sans-serif;
margin: 0px;
padding: 0px;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #334d55;
}

h2{
font-size: 114%;
color: #006699;
}

h3{
font-size: 100%;
color: #334d55;
}

h4{
font-size: 100%;
font-weight: normal;
color: #333333;
}

h5{
font-size: 100%;
color: #334d55;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font: bold 100% Arial,sans-serif;
color: #334d55;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}

#navBar{
margin: 0 0 0 79%;
padding: 0px;
background-color: #eeeeee;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

#content{
float:left;
width: 75%;
margin: 0;
padding: 0 3% 0 0;
}

/***********************************************/
/*Component Divs */
/***********************************************/

#siteName{
margin: 0px;
padding: 0px 0px 10px 10px;
}

/*************** #pageName styles **************/

#pageName{
padding: 0px 0px 10px 10px;
}

/************* #globalNav styles **************/

#globalNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
/* 'nowrap' prevents links from line-wrapping if there are too many to fit in one line
this will force a horizontal scrollbar if there isn't enough room for all links
remove rule or change value to 'normal' if you want the links to line-wrap */

#globalNav img{
display: block;
}

#globalNav a {
font-size: 90%;
padding: 0px 4px 0px 0px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 5px 0px 5px 10px;
}

/************** .feature styles ***************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;
}
/* adjust margins to change separation between the feature image and text flowing around it */

/************** .story styles *****************/

.story{
clear: both;
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story p{
padding: 0px 0px 10px 0px;
}

/************* #siteInfo styles ***************/

#siteInfo{
clear: both;
border: 1px solid #cccccc;
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
the bottom border of the navBar in cases where they "touch" */

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}

/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}

/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a:link{
padding: 2px 0px 2px 10px;
border-top: 1px solid #cccccc;
width: 100%;
voice-family: "\"}\"";
voice-family:inherit;
width: auto;
}

#sectionLinks a:visited{
border-top: 1px solid #cccccc;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #dddddd;
padding: 2px 0px 2px 10px;
}

/*********** .relatedLinks styles ***********/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

/************** #advert styles **************/

#advert{
padding: 10px 0px 0px 10px;
font-size: 80%;
border-top: 1px solid #cccccc;
}

#advert img{
display: block;
}

/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
font-size: 80%;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

Reply Like

01 February 2006, 12:00 AM

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

Might be worth noting that when I preview in IE from within Dreamweaver it show's fine - its only when I paste the HTML into the custom page template in Ebay that it causes problems!

Weird :crazy:

Reply Like

01 February 2006, 12:01 AM

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

Fixed it .... I think !!

Changed the nowrap line to normal as it says above

seemed to do the trick !!

Edited to say:

Just checked again and when I scroll over the link it causes the problem again!!! aarrrggghhh!!!

Reply Like

01 February 2006, 12:19 AM

Iain Young

Scooby Regular

Join Date: Sep 1999

Location: Swindon, Wiltshire Xbox Gamertag: Gutgouger

Posts: 6,956

Likes: 0

Received 0 Likes on 0 Posts

I've just cut and pasted your code and tried this on my pc, and it displays exactly the same in both firefox and in ie6. No problem at all. I would guess that there is something within the template which is conflicting with the settings already in place on the ebay website...

Reply Like

01 February 2006, 12:35 AM

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

Cheers Iain - appreciated mate

Seems strange tho as when I see the preview in the Ebay editor it displays correctly but when I scroll over the top links in the right nav bar the page suddenly resizes and casues a long scroll area to appear horizontally.

Just uploaded a test auction with item number 5662314746 and appears perfectly on Safari but as a complete mess in IE! I hate Microsoft !!!

http://cgi.ebay.co.uk/ws/eBayISAPI.d...MESE%3AIT&rd=1

Only had my Mac for a month but quickly realised it's miles ahead of Windows

If you know of any fixes or suggestions that'd be great !

Reply Like

01 February 2006, 12:44 AM

bob269

Scooby Regular

Join Date: Mar 2003

Posts: 2,654

Likes: 0

Received 1 Like on 1 Post

All appears fine in both my IE6 and firefox, is there any javascript in there, could be a problem with that and IE6, also check bottom left corner of IE6 for any error reports

Reply Like

01 February 2006, 12:47 AM

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

Hi Bob - did you check the Ebay item link?

Try rolling over the links on the top of the left nav bar please

cheers

Reply Like

Trending Topics

Sensor lever on left hand front suspension arm?

2

49
1

629
Number plate light cover

3

133
2005 STI PPP Engine Running Rich

10

757
Full detail & ceramic coating

4

803

01 February 2006, 08:06 AM

bob269

Scooby Regular

Join Date: Mar 2003

Posts: 2,654

Likes: 0

Received 1 Like on 1 Post

Quote:

Originally Posted by impreza_sports_nutter

Hi Bob - did you check the Ebay item link?

Try rolling over the links on the top of the left nav bar please

cheers

Yup, all seems fine, I'm on xp with sp2 and all the latest updates if thats any help.

Have you tried the design checker thingy in dreamweaver, usually points out what will and wont work with various browsers

Last edited by bob269; 01 February 2006 at 08:08 AM.

Reply Like

01 February 2006, 10:08 AM

Iain Young

Scooby Regular

Join Date: Sep 1999

Location: Swindon, Wiltshire Xbox Gamertag: Gutgouger

Posts: 6,956

Likes: 0

Received 0 Likes on 0 Posts

Are you trying this with the Mac version of IE6 or the PC version?

The reason I ask is that the Mac version is very buggy (far worse than the pc version), so it may be a problem with the Mac browser...

Reply Like

01 February 2006, 10:31 AM

#10

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

Hi guys,

thanks for your help so far :-)

On the ebay item above on my IE running on an XP Pro machine with SP2 there are still errors - also the whole page is grey when instead just the right nav bar background should be grey - can anybody please confirm?

cheers

Reply Like

01 February 2006, 11:48 AM

#11

Iain Young

Scooby Regular

Join Date: Sep 1999

Location: Swindon, Wiltshire Xbox Gamertag: Gutgouger

Posts: 6,956

Likes: 0

Received 0 Likes on 0 Posts

I see what you mean. Yes, when looking at the ebay site with IE it's all mucked up for me as well (WinXP sp2 ie6). Not got time to look into it at the moment though...

Reply Like

01 February 2006, 12:16 PM

#12

bob269

Scooby Regular

Join Date: Mar 2003

Posts: 2,654

Likes: 0

Received 1 Like on 1 Post

lol just seen what you mean, on IE you have to scroll 3 miles to the right to view the nav links, on Mozilla its fine.

Sorry

I can load it up on dreamweaver tonight and have a look at it for you

Reply Like

01 February 2006, 09:47 PM

#13

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

Hi Guys,

Hate to be a pain but anybody cracked the problem?

Thanks Bob and Iain for your kind offer - if you have any luck please let me know.

I think I might have to give up with the fancy formatting and just have a standard design. Just wanted to make my store stand out and be a bit different

cheers

Reply Like

02 February 2006, 12:04 AM

#14

bob269

Scooby Regular

Join Date: Mar 2003

Posts: 2,654

Likes: 0

Received 1 Like on 1 Post

Hi, If you pm me the code i'll take a look. thanks

Reply Like

02 February 2006, 12:29 AM

#15

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

Hi Bob,

will do mate

Reply Like

02 February 2006, 01:04 AM

#16

D16GER

Scooby Regular

Join Date: Sep 2005

Posts: 924

Likes: 0

Received 0 Likes on 0 Posts

Checked that test auction. When I open it first it spans too wide, but if I refresh it, all is ok.

I copied the code into DW and it did the same thing. Removed the link to your stylesheet and no more spanning.

Looks like it may be something to do with your CSS stylesheet.

Reply Like

02 February 2006, 01:12 AM

#17

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

hi D16GER - thanks for trying

~Trouble is without the CSS link the page isn't how I want it to appear

If you try the Ebay auction with Safari then you'll see the intended look.

cheers

Reply Like

02 February 2006, 01:17 AM

#18

D16GER

Scooby Regular

Join Date: Sep 2005

Posts: 924

Likes: 0

Received 0 Likes on 0 Posts

I will see if I can sort it for you. Just tried a little cutting and pasting, and have been able to almost get it working. I will let you know asap if I can sus it out.

I know what you mean about the Stylesheet. Can you paste it's code, or is it the same as you posted in 1st post?

Reply Like

02 February 2006, 01:26 AM

#19

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

Hi D16ger - Bob's working on it too so I'm hoping we'll have a solution between you two experts

The code for the css file is as in the thread above.

Everything works in Safari, it's ujust a combination of IE and Ebay I think !

Reply Like

02 February 2006, 01:28 AM

#20

D16GER

Scooby Regular

Join Date: Sep 2005

Posts: 924

Likes: 0

Received 0 Likes on 0 Posts

Okay, great. Do you happen to have the code from the Ebay template before you added your stuff? If so, can you post it up?

Cheers

Reply Like

02 February 2006, 01:33 AM

#21

SinghSuperStud

Scooby Regular

Thread Starter

iTrader: (2)

Join Date: Jul 2001

Location: Walsall

Posts: 1,918

Likes: 0

Received 0 Likes on 0 Posts

D16GER - I used the Dreamweaver CSS templates and added my stuff to that. Then copied the HTML code into the Ebay 'enter your own HTML' box when you list an item.

hope that helps

Reply Like