...

View Full Version : can't display left toolbar



lixiao
07-30-2012, 09:44 AM
Dear all,

Could someone please help explain why the left toolbar (identified as "nav" in the css style sheet below) in my subpages, such as this one (www.lixiao-art.com/bliss.html), can be displayed in older Windows versions of IE browser BUT NOT when using newer versions (e.g. Windows 7) of IE browser? :confused:

Also, why is the spacing between the thumbnails wrong in IE7 compared to using an older version of IE browser?

I've just started learning css coding, please be so kind to show me what went wrong and how I can make them correct.

Thanks so much!!! :)

----------------------------------------------------------------------
body { font-family: Verdana;
color: white;
margin: 0px;
background-color: black; }
#header { font-family: courier new;
padding-left: 40px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
background-color: white;
margin-bottom: 0px; }
#content {float: right;
padding: 30px 20px 20px 100px;
width: 650px;
position: absolute;
margin: 0px;
border: none;
font: white;
font-family: Arial;
background-color: black; }
h2 {height: 2em;}
#nav {float: left;
text-align: right;
font-size: small;
width: 200px;
margin-top: 30px;
font-weight: bold;
padding: 10px;
border: none;
}
#footer { font-family: arial;
padding-bottom: 5px;
width: 100%
border: none;
background-color: black;
color: white;
margin-bottom: 0px; }
a{text-decoration: none;
color: white;}
a:hover {color: red;}



* {margin: 0;}
html, body {height: 100%;}

.wrapper {min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1.5em;}

.footer, .push { height: 1.5em; }

.ImgBorder:hover { border: 1px solid red; }

img { border: none; }
---------------------------------------

SB65
07-30-2012, 09:57 AM
You can't see #nav because #content is absolutely positioned on top of it - later versions of IE, and FF are displaying the code correctly. Try removing the position:absolute from #content, and changing float:right to float:left.

IE7 displays this page differently due to its incorrect application of position:absolute in that it requires an explicit left statement. In the absence of this an absolutely positioned element is not correctly positioned - which here actually gives you the result you want. However, the change in my previous paragraph should fix this.

The spacing on the images is different in IE7 because you are using deprecated hspace and vspace attributes on the images, which IE7 is parsing, but more modern browsers are not. Remove these attributes and it should be OK.

lixiao
07-30-2012, 11:07 AM
Thank you so much!

Following your advice, I have made the changes regarding the position of the left toolbar.


However, I still have problems with the spacing between the images. I wanted to keep vspace=30px and hspace=20px between the images. Instead of using the deprecated vspace and hspace tags (I've removed them in the html), I have added this line (shown in red) in the css stylesheet:

.ImgBorder:hover { border: 1px solid red;
margin: 30px 20px; }


But, still, no spacing is shown between the images. What's wrong with my css coding?


For your reference, the entire css coding is here:

------------

body { font-family: Verdana;
color: white;
margin: 0px;
background-color: black; }
#header { font-family: courier new;
padding-left: 40px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
background-color: white;
margin-bottom: 0px; }
#content {float: left;
padding: 30px 20px 20px 100px;
width: 650px;
margin: 0px;
border: none;
font: white;
font-family: Arial;
background-color: black; }
h2 {height: 2em;}
#nav {float: left;
text-align: right;
font-size: small;
width: 200px;
margin-top: 30px;
font-weight: bold;
padding: 10px;
border: none;
}
#footer { font-family: arial;
padding-bottom: 5px;
width: 100%
border: none;
background-color: black;
color: white;
margin-bottom: 0px; }
a{text-decoration: none;
color: white;}
a:hover {color: red;}



* {margin: 0;}
html, body {height: 100%;}

.wrapper {min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1.5em;}

.footer, .push { height: 1.5em; }

.ImgBorder:hover { border: 1px solid red;
margin: 30px 20px; }

img { border: none; }

---------------------------

Many thanks again!!

SB65
07-30-2012, 11:57 AM
Looks like you've almost sorted this...

You're (now) applying a top and bottom margin to an inline element, which won't work. Try:


.ImgBorder {
display: block;
float: left;
margin: 80px 20px;
}

h5{
clear:both
}

Declaring the a elements as block will mean the top and bottom margins are valid, then float the elements so they line up next to each other. Finally add a clear:both to the h5 so it sits underneath all the elements.

Then, to give your images a margin when hovered, use the img tag:


ImgBorder img {
border:1px solid transparent}

ImgBorder:hover img{
border-color:red
}

Give the img a transparent border, and turn it red on hover. If you don't have the transparent border the images will jump to the right on hover because of the additional border.

lixiao
07-30-2012, 12:50 PM
Wow, thank you so much! I've made the changes as advised. But I've noticed two new problems:

1. some of the images are now aligned on the right. See, for example,

http://www.lixiao-art.com/broken.html
http://www.lixiao-art.com/gaze.html

2. Having removed the position:absolute attribute for the left toolbar (in #nav), it is now correctly displayed on the left. But, when I decrease the size of my browser, the left toolbar got squeezed to the top.

How can I fix these two new problems?

Thanks so much!!!

SB65
07-30-2012, 01:03 PM
1. That's because the images preceding the one on the right are actually 1px less high than the rest. A simple solution here would be to force the images to be 100px high via:


ImgBorder img {
border:1px solid transparent;
height:100px;
}

2. That will happen when the viewport is not wide enough. If you don't want this, set a min-width on #wrapper of 970px (total width of #nav and #content) or more.

lixiao
07-30-2012, 01:37 PM
Wow, I've learnt so much from you! Thank you so much !!! I really appreciate your help!!

lixiao
09-13-2014, 04:50 PM
Hi again,

Your solution had worked perfectly. But, once I have changed from using "Lightbox2" to "fancybox", the spacing between the thumbnails disappeared and the thumbnail border (when mouse hovering above) disappeared. What has gone wrong?

see the problem page after switching to using fancybox: Li Xiao, artist | 李枭 艺术家 (http://www.lixiao-art.com/test.html) (compared with Li Xiao, artist | 李枭 艺术家 (http://www.lixiao-art.com/latest.html) )


This is my code:



body { font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
margin: 0px;
background-color: RGB(181,170,128);
}

*{
font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:normal
}


#nav {float: left;
position: fixed;
background-color: RGB(233,231,197);
text-align: left;
font-size: 11px;
color: #645630;
width: 90px;
font-weight: bold;
padding: 100px 20px 100px 30px;
border: none;
min-height: 100%;
}



#content {float: left;
margin-left: 150px;
padding: 15px 20px 10px 80px;
width: 900px;
margin-top: 0px;
border: none;
font: black;
font-size: 11px;
}


#content a {text-decoration:underline}


h2 {height: 2em;}


.footer {
text-align:center;
padding-top: 50px;
padding-bottom: 1em;
font-size: 11px;
}


a{text-decoration: none;
color: #645630;}
a:hover {color: red;}


* {margin: 0;}
html, body, wrapper {height: 100%;}










.ImgBorder img { border:2px solid transparent;
height:100px;
}
.ImgBorder:hover img{ border-color: white}

.ImgBorder {display: block;
float: left;
margin: 30px 20px; }
h5{
clear:both
}

img { border: none; }


Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum