| Author |
Message
|
| Invader_Stu |
 Posted: Thu Dec 07, 2006 8:28 am Post subject: Overlapping in Internet Explorer |
 |
|
Train Ticket Criminal
Joined: Sep 08, 2006
Posts: 355
Location: Holland
|
Does anyone know how I can stop an image repeating more then it should in Internet Explorer. I'm trying to create boxes in my side bar with a top, background and bottom image. At the moment the background continues under and past the bottom image (see image) but FireFox deals with it fine.
I've included the code to show what I am doing at the moment. I'd also be interested in hearing if people think the way I have coded my side bar is sensible or if there is a more optermised way to do it. Thanks for any help.
p.s. It's trying to load the images in the code again. Sorry.
| Code: |
----- CSS CODE ---------------------
#sidebar {
width:200px;
float:right;
line-height:1.5em;
}
#sidebarbox {
background-image: url;
width: 200px;
float: right;
margin: 0px 0px 10px 0px;
overflow:hidden;/* for ie to hide extra height*/
}
#sidebarbox_text {
width: 170px;
float: left;
padding: 0px 15px 0px 15px;
}
----- HTML ---------------------
<div id="sidebar">
<div id="sidebarbox">
<img src=" image.jpg ">
<div id="sidebarbox_text">
Blog Sites:
<ul>
<li><a target="_blank" href="http://www.bloggertalk.net/">Blogger Talk</a></li>
<li><a target="_blank" href="http://">Blogger Forum</a></li>
</ul>
</div>
<img src=" image.jpg ">
</div>
</div> |
_________________
 |
|
| Back to top |
|
 |
Sponsored Ads
|
 |
| Shawn |
| Posted: Thu Dec 07, 2006 2:49 pm Post subject: |
|
|
Site Developer
Joined: Sep 06, 2006
Posts: 327
Location: Canada
|
Hello Invader_Stu 
Are you refering to the overlap about 1px under the block?
Give this a try and let me know...
| Code: | #sidebar {
width:200px;
float:right;
line-height:1.5em;
}
#sidebarbox {
background-image: url(http://i52.photobucket.com/albums/g2/InvaderStu/side_bar_middle.jpg);
width: 200px;
float: right;
margin: 0px 0px 10px 0px;
overflow:hidden;/* for ie to hide extra height*/
display: inline; /* IE double margin bug fix */
}
#sidebarbox_text {
width: 170px;
float: left;
padding: 0px 15px 0px 15px;
} |
I haven't tested this!
As far as the menu nav it looks fine and visitors should have no problems navigating, its clear and clean
Looking good Invader_Stu 
Shawn
_________________
| Affordable Web-Hosting | FREE Blog Directory |
PC Windows Tips |
Ultra Game Play
Last edited by Shawn on Thu Dec 07, 2006 3:25 pm; edited 1 time in total |
|
| Back to top |
|
|
| Invader_Stu |
| Posted: Thu Dec 07, 2006 3:20 pm Post subject: |
|
|
Train Ticket Criminal
Joined: Sep 08, 2006
Posts: 355
Location: Holland
|
Thanks Shawn. I copied and pasted your code over mine but unforchanetly its still not working.
This bit is just the side bar. I also have a tab system for the menu. I'm not to far of putting in the Wordpress tags
_________________
|
|
| Back to top |
|
|
| Shawn |
| Posted: Thu Dec 07, 2006 3:31 pm Post subject: |
|
|
Site Developer
Joined: Sep 06, 2006
Posts: 327
Location: Canada
|
Hum, that should of worked, as the fix I gave you is for IE specificly for the double margin's...and thats what seems to be happening is the margin is being pushed!
Did you try reducing the padding for the content to see if thats causing it as I see you have it set to 15!
I will test something else and get back to you!
It makes it hard though as we can't see the theme live yet to pin point the issues but it sounds like your getting closer!
Shawn
_________________
| Affordable Web-Hosting | FREE Blog Directory |
PC Windows Tips |
Ultra Game Play |
|
| Back to top |
|
|
| Invader_Stu |
| Posted: Thu Dec 07, 2006 3:56 pm Post subject: |
|
|
Train Ticket Criminal
Joined: Sep 08, 2006
Posts: 355
Location: Holland
|
I just tried changing the padding but it did not seem to have an effect.
At the moment the rounded top plus title are one image. The rounded bottom is another image (they are both the images in the HTML code which are trying to show on the forum).
The bit in between is other image which is 10 pixels high repeated and I think the last one is showing up under the bottom image rather then pushing the bottom image under it.
I'm not sure if I just said what you said but in another way 
Thanks once again for helping
_________________
|
|
| Back to top |
|
|
| ScottishBlogger |
| Posted: Tue Dec 12, 2006 5:11 pm Post subject: |
|
|
Junior Member
Joined: Sep 09, 2006
Posts: 100
Location: Scotland
|
Is this what you are after?
http://bob-baillie.com/stu/
CSS | Code: | body {
background: #fff;
}
img {
border: 0;
}
#boxtop {
background:url(side_bar_links.jpg) no-repeat;
height: 50px;
width: 200px;
}
#boxmiddle {
background: url(side_bar_middle.jpg) repeat-y;
height: auto;
width: 200px;
}
#boxmiddle ul {
margin-bottom: 0;
margin-top: 0;
}
#boxbottom {
background: url(side_bar_bottom.jpg) no-repeat;
height: 20px;
width: 200px;
} |
HTML | Code: | <div id="boxtop"></div>
<div id="boxmiddle">
<ul>
<li>Blogger Talk</li>
<li>Blogger Forum</li>
</ul>
</div>
<div id="boxbottom"></div>
|
_________________
Bob! |
|
| Back to top |
|
|
| Invader_Stu |
| Posted: Wed Dec 13, 2006 5:03 am Post subject: |
|
|
Train Ticket Criminal
Joined: Sep 08, 2006
Posts: 355
Location: Holland
|
Thanks ScottishBlogger
I had to make a few changes (but only because other things in the code I did not show here was conflicting with it) but that fixed it. I can see where I was going wrong to start with as well now.
_________________
|
|
| Back to top |
|
|
| ScottishBlogger |
| Posted: Thu Dec 14, 2006 1:54 pm Post subject: |
|
|
Junior Member
Joined: Sep 09, 2006
Posts: 100
Location: Scotland
|
Glad to help
_________________
Bob! |
|
| Back to top |
|
|
|
|
