|
CSS - Css Issue With Ie6 --> Border Ontop Of Image!
My site is: adventurevalley.ca/jason
The current CSS file appears to work problem free in IE7 and FF, but Im having no luck in IE6. I realise things like the hover highlighting and menu indent will not work which I am fine with, however the corners and different box size are driving me insane. Can someone please point me in the right direction?! Thanks, Jason Similar TutorialsHi, This might be a case of an easy fix thats being over-looked but I've tried everything I haven't been able to find to 'fix' this. FF is cool, IE is giving me 'teh gap' I have attached an image, I highlighted the pic so it shows the black bar of space right under the top image. There are two DIVs that are 'stacked' The top one has the top half of the image, the bottom one has the gold bar as a background image, with the bottom half of the pic in it. I can't make the images the background of the div because i'm adding a rollover and link to the images. So, CSS: Code: #interior_top_image{
text-align:center;
vertical-align:bottom;
display:block;
height:85px;
margin:0px;
padding:0px;
}
#interior_header{
background-image:url("images/interior_bottom.jpg");
background-position:bottom center;
background-repeat:no-repeat;
background-color:#263F7F;
display:block;
height:85px;
text-align:center;
margin:0px;
padding:0px;
}
HTML: Code: <div id="interior_top_image"><img src="images/cross_top.jpg" name="cross_top" border="0"></div> <div id="interior_header"><img src="images/cross_bottom.jpg" name="cross_bottom" border="0"></div> Hi I have a image gallery and I would like delete buttons or red little x's ontop of each image. I dont want to make the image background DIV I want to keep it <img src="image.jpg"> Is it possible to do this? Louis In a CSS I have a couple of styles defined for different tables. My problem is that on one table I want borders around each TDk and I don't want them around another. The only way I've found to affect the borders was to define a TD element, but that makes all the tables have borders. What do I do? Hi all, I have a content div wrapping two inner divs. The widths of the inner divs (div A, div B) add up to the total width of the content div. div A is floated left. Everything displays correctly, until I put a 1px solid border on the content div. In IE 6, div B renders below div A. All margins and paddings are 0px. When I adjust div B's width to factor in the content div's border, the divs position correctly, but there is a gap between div B and the border. Can someone tell me why this is happening and how to fix it? Thanks in advance I'm building a series of navigation links in boxes on top of each other. I want to pad the links inside their div tags 3 pixels all the way around. I'm seperating the boxes using the border property, 1px solid on the bottom of each cell. The top and the bottom are handled in a seperate class. In firefox, the brower adds the 3 pixels to the overall width (maybe six since I'm padding left/right) so the page comes out like this: --------- | Link 1 | ------------- | Link 2 | ------------- | Link 3 | ------------- Now in IE, it looks correctly. I'm not sure which one is correct, but since IE looks right I assume it's correct. Any way to get the padding to be handled consistently in 2 browsers? I have the following code in my page for the links styles: Code: a:link, a:visited, a:active {
font-weight: bold;
color: #000099;
text-decoration: none;
background-color: #C4E4F7;
border: 1px solid #000066;
}
a:hover {
font-weight: bold;
color: #FC6103;
text-decoration: none;
background-color: #FFEAD5;
border: 1px solid #974B00;
}
The thing is, that in firefox, the code works fine, but on IE the top and bottom border sections are not displayed... Can't understand why... Any ideas how to fix it? www . gameyin . com It shows as the border image twice. Er...I mean the image is showing twice and no matter what I do I can't seem to get the bottom part to stretch more to meet the content. I don't want to try pixels though because that wouldn't be fluid : \. Any help? Okay, I know this has been discussed a lot here and I did a lot of searching including reading through ie problem with drop down menu, but I'm still having a heckuva time getting mine to work. Here it is: http://www.jimandkris.com/test/verticalpopout.html When viewing in IE, on any parent menu item with children, it expands downward a few pixels when hovered over. I'm shooting for something like this: http://sperling.com/examples/menuv/ The *html hack isn't fixing it like I hoped. What am I missing? Second, and not as major, in FF my top border (in red) doesn't extend the entire length of the li for either the parent or the children. Thoughts on that? Thanks again! this is what happen... as you can see from the 2 images Mozilla does not use the border in the way IE6 does (it should be all around the images) why ??? Code:
<span class="minilogo"><img src="../images/minilogo/minilogo_armatabrancaleone.gif" border="0" /></span>
.minilogo {background-color:#fff;
border:2px dashed #88f;
}
the code will come from a php page with 4 gif in a row... thank you Roberto Hey all, I am working on completely redoing our website (FizzPow.com) I have a border-right: on my left column in a wordpress template I am modifying. It looks fine in Chrome, IE9, Safari5, but in FF7, it moves my right column all the way down. Here's the site: FizzPow.com/newsite I am an experienced programmer but fairly novice with HTML/CSS. Please be kind and I very much appreciate your help! I'm having some issues with getting a table border to appear in both Mozilla and IE. I had it working at one point but now it's stopped working in IE. Basicly this is the code to control it: border:1px solid #0; but IE doesn't read it, I've checked the rest of the CSS to see if there is any conflicts but found none. Anyone know how to get the table border to appear in both IE and Mozilla? the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page. Any ideas? I attached my style sheet as well. thanks. http://bowtree.org/latest/luminaries.php http://bowtree.org/latest/index.php using css i've got a table in a div: e.g. div padding: 20px table width: 540px border: 10px solid red; result: the div including it's own padding should be 600px wide but using the html strict dtd ie is in strict mode (confirmed by other measurements) the whole width of the table is 540px including the borders. also setting box-sizing to contents . thoughts? Hello, Here is an example of the issue I'm having.. http://www.patricksaviation.com/backend.php In Firefox and IE, the border color is correct, but in Opera the color is just black; this is caused by applying border-collapse: collapse. I tried adding, in addition to to the standard html bordercolor, a CSS border-color, which helped change Opera to a dark green (not the right color, but closer) but it also causes the border color in IE to darken (the wrong color). Does anyone know what causes this or how I could fix it? Thanks, Patrick Is there a way to get some text to be ontop of other text no matter what? I want to force certain text on top even if something else says that the something else should be ontop. I am doing this on the top and bottom of pages... for forced ads... they are being covered up on somepages and i want to make sure that this can not happen I'm trying to put a 1px line on the bottom of my header that spans the width all the way. I've used border-bottom: 1px and border-style: solid; but I still have a looks like 3px border all the way around my header. Also I have my unordered list inside of my header div and it's placed directly below my header. Any help much appreciated, just learning how to layout. http://imgbin.org/index.php?page=image&id=6637 CSS code Code: body {
font-family: "Lucida Sans Unicode", sans-serif, Verdana;
background-color: #999999;
}
#header {
height: 75px;
width: 100%;
border: 0px 0px 1px 0px;
border-style: solid;
border-color: white;
background-color: #336699;
}
#container {
margin: 0 auto;
width: 900px;
height: 100%;
background-color: #666666;
}
#content {
width: 75%;
}
#sidebar {
width: 25%;
background-color: #666666;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
and HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Jeremy</title> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <h1 class="header">Jeremy</h1> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> <li><a href="forums.html">Forums</a></li> <li><a href="contactme.html">Contact Me</a></li> </ul> </div> <div id="container"> <div id="sidebar"> </div> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor dui sit amet diam molestie cursus. Vivamus a sapien sed nunc fermentum feugiat. Donec iaculis neque sit amet tortor consectetur eu lacinia est commodo. Ut lobortis fermentum felis, eu tristique elit fermentum sed. Etiam pulvinar commodo est non vestibulum. Aenean sed ante in velit vulputate tristique. Duis lacinia eleifend massa, sed volutpat dolor malesuada at. Nam convallis consequat mauris imperdiet rutrum. Aenean vitae vestibulum libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum lorem nulla, pellentesque vitae porttitor condimentum, dignissim a libero. In quis turpis orci, vitae faucibus risus. Duis tincidunt, libero tincidunt hendrerit viverra, felis lectus rutrum diam, et dictum mauris ipsum nec purus.</p> <p>Vivamus ut nunc vitae eros fermentum pretium. Nunc molestie odio vitae magna consectetur quis ultricies purus adipiscing. Curabitur ante nisl, scelerisque a consequat sed, rhoncus at turpis. Morbi blandit ante eu tellus facilisis eu semper enim auctor. Nunc sollicitudin orci nunc, vitae accumsan risus. Etiam nec est in ipsum iaculis varius. Nam enim velit, imperdiet viverra condimentum vitae, egestas eget dolor. Nullam facilisis condimentum diam, in euismod lorem mattis a. Mauris vel nulla et ipsum venenatis aliquam vitae a nibh. Nunc commodo ullamcorper odio vitae fermentum. Praesent faucibus blandit condimentum. Integer sed justo nulla. Praesent id gravida dui. Proin malesuada interdum scelerisque. Sed condimentum justo nec metus venenatis accumsan.</p> </div> </div> </body> </html> Hello all, My website appears fine on Firefox 3.6.7 but not on IE 8 (it is missing the borders on the article text area and the login box is up too high). I notice you can't include URLs in the post for new members so any help is greatly appreciated. Thanks! ok i have links on the side, i have applied border-bottom:0.1em solid black properties so they look like they are underlined. Now it all works but sometimes when i scroll the page down and then up, SOME of the link's border have disappeared, i can fix this by moving my mouse of the links and the border appear but i was wondering is it to do with CSS/html? the only other thing could be my Screen/monitor's refresh rate Something like this gives real thick and uneven borders, is it possible to make the borders combine and become one single border when they are next to each other? I don't want to use seperate border-top border-left etc ... Thank you. Code:
<HTML>
<HEAD>
<style type="text/css">
div.table div
{
border : 1px solid black;
/* border-collapse : collapse; */
}
div.table div.tr
{
clear : both;
}
div.table div.tr div.th
{
float : left;
font-weight : bold;
width : 25%;
}
div.table div.tr div.td
{
float : left;
width : 25%;
}
</style>
</HEAD>
<BODY>
<div class="table">
<div class="tr">
<div class="th">column 1</div>
<div class="th">column 2</div>
<div class="th">column 3</div>
<div class="th">column 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">numAAA 1</div>
<div class="td">numA 2</div>
<div class="td">numAAAA 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
<div class="tr">
<div class="td">num 1</div>
<div class="td">num 2</div>
<div class="td">num 3</div>
<div class="td">num 4</div>
</div>
</div>
</BODY>
</HTML>
Here is a test page... http://www.thedreyersonline.com/test.htm It doesn't look horrible, so I can live with it, but it's designed so that the comments section will actually sit on the bottom like the "onbottom.gif" screenshot... It works if there is enough content in the "content" div prior to the "comments" div, but not when it's short. An alternative solution would be like the "extended.gif" screenshot, but the onbottom shot is preferred. Any help would be greatly appreciated! Thanks Bryan |
|||||||