2 replies [Last post]
m3rcury
Offline
newbie
Last seen: 12 years 26 weeks ago
Timezone: GMT-7
Joined: 2006-10-19
Posts: 8
Points: 0

Hello,

Finally I uploaded my website and everything works fine on Firefox. However, when I tried to review the website on IE, the bug showed up.

Try to go to: http://www.sutoyodesign.com/identity.html and http://www.sutoyodesign.com/others.html (use IE)

Mouse over on the logo thumbnails on the second row. On IE, the whole box will become short (the length). I checked the codes, and nothing's wrong with it. In FF, everything works just fine. It only happens on these 2 particular pages (small thumbnails).

Anyone can help please? thanks

This is my first website, so still a lot of things to learn.

Thanks

here's my CSS code

/*Tags redefined */
body {
background-color: #faeed6;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;

}

p {
padding:0px;
margin:0px;
}

a:link {
text-decoration:none;
color:#666666;
}

a:visited {
text-decoration:none;
color:#666666;
}

a:hover {
text-decoration:underline;
color:#00CC99;
}

a:active {
text-decoration:none;
color:#666666;
}

/*Main body wrapper layout*/

#mainbody{
width: 800px;
margin-top: 50px;
margin-left: 120px;
border: 2px solid #00cc99;
background-color: #FFFFFF;
position: relative;
margin-right: 120px;
overflow: hidden;

}

#resumemainbody{
width: 800px;
margin-top: 50px;
margin-left: 120px;
border: 2px solid #00cc99;
background-color: #FFFFFF;
margin-right: 120px;
}

/*Body copy container */

#bodycopy{
margin-top:90px;
margin-left:150px;
padding-top:10px;
padding-left:30px;
padding-right:30px;
padding-bottom:10px;

}

/*footnote*/

#footnote {
font-size:9px;
margin-left: 120px;
padding: 5px;
width: 800px;
text-align:center;

}

a.footer{
color:#666666;
}

a.footer:link{
color:#666666;
}

a.footer:visited {
color:#666666;
}

a.footer:hover {
color:#666666;
}

a.footer:active {
color:#666666;
}

/*Link indicators "you are here" */

body#sidenav a#sidemenuresume,
body#sidenav a#sidemenupackaging,
body#sidenav a#sidemenuidentity,
body#sidenav a#sidemenulayout,
body#sidenav a#sidemenucontact,
body#sidenav a#sidemenuothers

{
color:#ffffff;
background-color:#00cc99;
}

/*Vertical menu on subpages*/

#sidemenu {
width: 150px;
margin-top:100px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #b2a1cb;
float:left;

}

ul.verticalmenu{
margin:0px;
padding:0px;
position:relative;
}

ul.verticalmenu li {
list-style-type: none;
display: block;
text-align: right;
padding-right:20px;

}

ul.verticalmenu li a{
font-size:10px;
font-weight:bold;
color: #b2a1cb;
padding: 5px;
line-height:40px;
}

ul.verticalmenu li a:link{
color: #b2a1cb;
}

ul.verticalmenu li a:visited{
color: #b2a1cb;
}

ul.verticalmenu li a:hover{
color:#ffffff;
text-decoration:none;
background-color:#00cc99;
}

ul.verticalmenu li a:active{
color: #b2a1cb;

}

/*Resume page styles */

p.heading {
color:#b2a1cb;
font-weight:bold;
padding-top:10px;
font-size:11px;
letter-spacing:1px;
}

p.subheading {
color:#00cc99;
font-weight:bold;
padding-top:10px;
font-size:11px;
letter-spacing:1px;
}

p.copy {
padding-bottom:10px;

}

ul.qualifications {
margin:0px;
padding:0px;
}

ul.qualifications li {
list-style-type:none;
}

/*Portfolio thumbnail styles*/

img.thumbnail {
border-width:1px;
border-style:solid;
border-color:#cccccc;
padding:4px;
margin-bottom:10px;

}

ul.thumbnail {
margin:0px;
padding-bottom:20px;
position:relative;

}

ul.thumbnail li {
list-style-type:none;
display:inline;
padding-left:20px;
padding-bottom:20px;

}

ul.thumbnail li a:link {
border-color:#cccccc;

}

ul.thumbnail li a:visited {
border-color:#cccccc
}

ul.thumbnail li a:hover {
border-color:#00CF9C;
}

ul.thumbnail li a:active {
border-color:#cccccc
}

img.logothumb {
margin-bottom:20px;
}

/*Portfolio detail styles*/

.portfolio img {
padding:10px;
}

div.portfolio {
margin-top:80px;
margin-left:80px;
width: 350px;
float:left;

}

.portfolio p {
text-align:center;
padding:5px;
}

And here's the page's html code

Logo & applications

  • PACKAGING
  • LOGO
  • LAYOUT
  • OTHERS
  • RESUME
  • HOME












© 2006 All rights reserved

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

On first glance looks like a

On first glance looks like a classic case of the 'Guillotine bug'

Google that and you should get P.I.E as first link for a detailed explanation.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

m3rcury
Offline
newbie
Last seen: 12 years 26 weeks ago
Timezone: GMT-7
Joined: 2006-10-19
Posts: 8
Points: 0

Aah..thank you very much.

Aah..thank you very much. Now it's fixed! I guess from now on I should always have the height 1%? Why does this only happens when I make the thumbnail images as link?