|
CSS - Div Width And Position Issue With Ie 6 And 7
Web page: http:/ / www. diffentest.pikadoo.com / difference / index.php?title=Mouse_vs_Rat
CSS location: http:/ / diffentest.pikadoo.com / difference / skins / mistylook / main.css Works perfectly in FF, Safari and Opera. Problem: In IE6, #entityfamilies div has a width problem. If I specify width as 75%, it takes 75% of parent div whereas the other browser's seem to be considering window width. The second problem with IE6 is that the div scrolls away with the page (I don't want it to - and it remains static in FF). The problem with IE7 is that the entire div vanishes from the view. Any help will be greatly appreciated. I have been working this for hours and no sleep yet on Friday night. Similar TutorialsHi. What's em, pt, pc, px, ex, % when declaring width, height or position in CSS? It seems people use different measurement. What exactly are those? Any help will be appreciated. Thanks. Hello all, still a little new to css layout problem-shooting in older browsers, so thanks for your help in advance! I'm having a problem which is only occurring in Internet Explorer 6, but I just can seem to figure out what's wrong. if you look at the page in any other browser, you can see the header <div> stretches the width: 100%, but in IE6, the header <div> does not extend all the way to the left, but rather starts where the margin:auto Main <div> tag starts from the left side. What I am lost on is that the footer <div> performs this just fine, but it's position is not fixed and there is no z-index. here is the code for both, and thanks again for having a look: #header { width: 100%; height: 107px; display: block; position: fixed; margin: 0px; padding: 0px; background-color: #000000; background-image: url(../images/main/bhs_design_header_gradient.jpg); z-index: 100; } #footer { width: 100%; height: 35px; display: block; background-color:#000000; margin-top: 10px; clear: both; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #EBEAE8; margin: 0px; background-image: url(../images/main/bhs_design_footer_gradient.jpg); } CSS : Code:
body{
margin:0;
background-image:url(images/pattern1.gif);
padding-left:5%;
padding-right:5%;
}
h1{
background : url(images/logo.gif) no-repeat;
width:291px;
height: 127px;
}
#main{
background : #FFFFFF url(images/back.gif) repeat-x;
border-left: 8px solid #5D5F60;
border-right: 8px solid #5D5F60;
}
HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" title="standard" href="blueDream.css"/> <title></title> </head> <body> <div id='main'> <h1></h1> </div> </body> </html> There appears to be a very strange gap on the left side of the heading background which I cannot seem to get rid of. Any ideas? I'm currently using the tutorial located at Use Sprites to Create an Awesomeness-Filled Navigation Menu Based on that I've created a sprite image that is 960x88. I've got my menu in place, but the background-position completely fails. While I can change the width of each item, revealing more or less of the image it still only shows the first part of the image, repeating "Home". See attached screenshot for example of what it's doing. Here is my HTML and CSS: html Code: Original - html Code <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav> <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav> css Code: Original - css Code #main_nav { height: 40px; } #main_nav li { float: left; } #main_nav li a { background:url(../images/main_nav_sprite.png); display: block; height: 40px; } .home { background-position: 0px 0px; width: 60px; height: 40px; } .case_studies { background-position: -60px 0px; width:120px; height:40px } .solutions { background-position: -180px 0px; width:100px; height:40px } .free_quotes { background-position: -280px 0px; width:100px; height:40px } .government { background-position: -380px 0px; width:120px; height:40px } .recycle { background-position: -455px 0px; width:75px; height:40px } .resources { background-position: -555px 0px; width:100px; height:40px } .about_us { background-position: -642px 0px; width:87px; height:40px } .contact_us { background-position: -748px 0px; width:106px; height:40px } .login { background-position: -822px 0px; width:74px; height:40px }
Hello all, I am having a problem I can't seem to figure out. The site is: http://www.ciccotticenter.org/test_site/ When you view the site in IE6, the logo in the top left corner disappears. I have tried everything I can think of. Interestingly when I add * { border: 1px solid red; } it works. But I can't figure out what thats doing to make it work. Any ideas? Thanks, Ryan Please look at this page - http://casadelsol.tmhdesign.com/about.asp I have a div with an id of "header". In that div I placed this code Code: <div style="width:200px;height:200px;background-color:yellow;margin:0 0 -50px 400px;z-index:10000"> </div> As you can see it goes under the absolutely positioned div element with an id of top_header. I want to put a drop-down menu in the top header area but it slides under the top_header element. Can you help? Thanks If you could please see this page: http://pnlab.soundwebdev.com/PostCalendar.phtml compare in IE vs. Firefox (or anything good ) You will see that in IE the content of the right column shifted below the last thing in the left column. I believe this is because IE thinks that the right-col content is too wide and so shifts it down. Obviously, I don't want that. because this is a dynamic-content site (Postnuke), I can't just change the width of the content on the right-col, so the solution has to be in the template or the css. template: http://pnlab.soundwebdev.com/themes...ates/master.htm (view source) css: http://pnlab.soundwebdev.com/pnTemp...imple.style.css any ideas? puulllease? my site looks different in IE9. The red block on the right of Find Us shifts down onto the next line but in IE8 firefox and opera it displays fine. Is there a way to sort this without conditional statements or do i need to redo the menu set up agian? Here is a snippet of the css for the menu: Code:
#topMenu { width:960px; position:absolute; bottom:0;}
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
font-size:16px;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
.left { width:206px; background-color:#d30507; height:19px; }
.right { width:55px; background-color:#d30507; height:19px; }
ul#menu li a
{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:0px 20px 0 20px;
border-right: 1px solid #d30507;
}
ul#menu li a:hover
{
color:#fff;
background: #d30507;
}
ul#menu li a.current
{
display:inline;
color:#fff;
background: #d30507;
float:left;
margin:0;
}
Hi all, I'm having a little trouble getting my CSS rounded border to display correctly. I've neally got it however i am unable to sort out the right hand side alignment. I want it to be 234px wide, at the moment i have the width set at 100% but whenever i change this value to anything smaller or a fixed width i get all kind of incorrect output. You can see the code he Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <STYLE type="text/css" media="all"> @import url( css/commonDesignA.css ); </STYLE> </head> <body> <BR><BR> <!-- START: Boxed Cell Information Cell --> <div class="wpFieldSetCornerTopLeft"></div> <div class="wpFieldSetTopCenter"></div> <div class="wpFieldSetCornerTopRight"></div> <div class="wpFieldSetCenter"> <div class="wpFieldSetCenterContent"> <!-- START: Boxed Cell Information Cell Content --> <Span class="mytpPanelHaeding">Test</span> <!-- END: Boxed Cell Information Cell Content --> </div> </div> <div class="wpFieldSetCornerBottomLeft"></div> <div class="wpFieldSetBottomCenter"></div> <div class="wpFieldSetCornerBottomRight"></div> <!-- END: Boxed Cell Information Cell --> </body> </html> ...and the CSS file: Code:
.panelHeading
{
COLOR: #982E33;
}
/* *** Field Set Corner/Center Styles ** */
.wpFieldSetCornerTopLeft
{
font-size: 0px;
float: left;
vertical-align: top;
width: 4px;
height: 4px;
background-image: url(../images/borders/top_left.gif);
background-repeat: no-repeat;
}
.wpFieldSetCornerTopRight
{
font-size: 0px;
float: right;
vertical-align: top;
width: 4px;
height: 4px;
background-image: url(../images/borders/top_right.gif);
background-repeat: no-repeat;
}
.wpFieldSetCornerBottomLeft
{
font-size: 0px;
float: left;
vertical-align: top;
width: 4px;
height: 4px;
background-image: url(../images/borders/bottom_left.gif);
background-repeat: no-repeat;
}
.wpFieldSetCornerBottomRight
{
font-size: 0px;
float: right;
vertical-align: top;
width: 4px;
height: 4px;
background-image: url(../images/borders/bottom_right.gif);
background-repeat: no-repeat;
}
.wpFieldSetTopCenter
{
font-size: 0px;
float: left;
vertical-align: bottom;
height: 4px;
width:234;
background-color: #ffffff;
border-top: 1px solid darkblue;
}
.wpFieldSetBottomCenter
{
font-size: 0px;
float: left;
vertical-align: top;
height: 4px;
width:234;
background-color: #ffffff;
border-bottom: 1px solid darkblue;
}
.wpFieldSetCenter
{
float: left;
width: 100%;
background-color: #ffffff;
}
.wpFieldSetCenterContent
{
padding-right: 10px;
padding-left: 10px;
padding-bottom: 0px;
padding-top: 0px;
border-right: 1px solid darkblue;
border-left: 1px solid darkblue;
}
BODY
{
BACKGROUND-IMAGE: url(../images/bg_gradient_blue-D7E8F0.jpg);
BACKGROUND-COLOR: #d7e8f0;
BACKGROUND-repeat: repeat-x;
background-attachment: fixed;
MARGIN: 0px;
}
Any help greatly appreciated. Cheers. I can't figure out why the ul with the id #two is not responding to my position attempt. It is child of an li in the ul w/ a class .menu on www.eagletransmission.net If you mouse over Gallery the dropdown should be flush with the left side of the parent li but it is not. Aaaaargh Tom Hi, I have been beating my head against the wall here. My video position in firefox shows up over top of my other nested divs/classes. www.binaryshopper.com The site renders perfect in IE. When you spend more time on CSS than programming, something is wrong! I love CSS but it still doesn't do what it was intended to do. After years of CSS, you still have better control over layout using crappy tables!! Can someone please help me here before I start shooting Firefox developers? Hi all. I'm having a problem with the header of my web page. I want it to extend across the entire page but can't seem to get it to do so. When I change the width, the header extends to the right only. the url is spatterblog, can view using firebug the css is: #header { background: #e75c14 url('images/img02.gif') repeat-x center center; } #headerimg { margin: 7px 9px 0; height: 192px; width: 100%; #headerimg .description { font-size: 1.2em; text-align: center; } #header { background-color: #e75c14; margin: 0 0 0 1px; padding: 0; height: 200px; } Hello, I'm building a site for a friend and I have an issue on older IE browsers with the page expanding horizontally out of bounds when the content reaches more than 100% of the viewport. Could someone offer me a solution for this problem? It works properly on Moz and IE8. The anomaly can be viewed on this page: http://mercurial.pri.ee/Esaber/isabel.html My CSS files are as follows: http://mercurial.pri.ee/Esaber/styling.css http://mercurial.pri.ee/Esaber/table.css Afternoon Folks! Have a seemingly simple problem here but I can't seem to figure it out. I have a Horizontal drop-down CSS menu. It's working really well in FF but our fav friend IE is reading it differently. I'm using a list for my nav, with an auto width and 15px padding left/right. But in IE it registers my width as 100% so my horizontal menu turns into a vertical menu. edit:: using IE6 as my base test simply because IE7 isn't an "Approved Software" for work yet.. haha! I'm about to head out to lunch in a few and wanted to see if some CSS wiz's could slap me and help me find the best solution for my needs. I'm sure it's simple and I just keep scimmin right over it. So I uploaded what I have for it. It can be seen here This is the style which defines my width: css Code: Original - css Code #pmenu a, #pmenu a:visited { display:block; padding: 0 15px; width: auto; font-size:11px; color:#fff; height:25px; line-height:24px; text-decoration:none; border-right: 1px dotted #fff; }
#pmenu a, #pmenu a:visited {
Of course, any and all help is appreciated! TYTY! TIA! Lates! having a problem ;-) Why else post here right ?? well please have a look at http://www.furastadesigns.com/kfn/ using firefox,, see the pulldowns ? they are correctly sized when the pulldown is dropped. But in Explorer they are keeping the same size as the mainbox (not the pulldown) I tried controlling the option tag but using width:; but that works only in firefox. Any ideas on how to make the option (the pulldown list) bigger then the main box in firefox ??.. Thanks alot... So I'm having what I think are CSS issues with a site... I'm supposedly a "new user" though I've been registered for a long time, and just not used this account in a long time, so I can't show my URL's here... tried to abbreviate them... I'm not sure how to show you what the issues are if I'm not allowed to post URLs. Anyone with any suggestions there? This looks fine in IE, but not in Firefox. On (blocked) the main content that sits in the middle of the page sits in an 800px div called "page". I've set the background color for that to be white: FFFFFF, which Internet Explorer seems to understand. But Firefox seems to be leaving "page" to be transparent. This means that either the left div (content) or the right div (reef-job) ends when the content inside of it ends, rather than continuing down to the bottom of the "page" content. I'm not sure how to fix it for Firefox. Again, it's all the pages inside of (carrieandjonathan [dot] com /island-reef-job) and the stylesheet is at (carrieandjonathan [dot] com / island-reef-job / mt-island-reef-job.css) #page { width: 800px; margin: 0 auto; padding: 0px 0; background-color:#ffffff; } Any help is greatly appreciated. Thank-you in advance! Warmest, Jonathan CSS 1, Netscape 4.x and background+width issue need workaround: I am working on a website template and converting it to CSS. I have seperated my CSS1 from my CSS 2 sheet and am currently trying to get NN 4.x to do what I have read it won't do and have no idea how to make it do what I want. BTW:Please do not advise me to drop NN 4.x, unfortunately it is not within my power to do so. What I need to do is put a background color on an H1 header that will be only as wide as the table cell (column) it is in. (3 column plus header and footer layout). BTW: I cannot drop the table either. My problem is that when I get the background to work (instead of just surrounding the text) I cannot get it to be liquid and remain inside its cell. When I set the width to %'s it just pushes the other 2 columns out of the way even when the % is not the width of the column. Unfortunately, pixels are not flexible enough for this layout. So, how do I get a background color on an H1 tag that fully expands to the width of the column (not just the text) using CSS 1 and NN 4.x while not destroying the table layout? Thank you for your help- Schach PS: This is not an issue of my code, but an issue of the NN 4.x CSS support. So I do not need to have the code debugged, but instead I need a hack or method to outsmart the browser, so I can duplicate a site in CSS. This site is currently heavily reliant on tables, something we want to change, but can't unless we can reproduce the site in NN 4.x. (You can email me if you would like to do that) I have having issues with IE displaying my page wrong. The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site) and the css can be found at http://tampabay-online.org/cetr/cetr.css It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top) Any help much appreciated. Code: .content {
position:relative;
width:320px;
margin-left: 125px;
margin-top: 20px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3;
}
#right {
position:absolute;
width:200px;
top:20px;
left:500px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:1;
}
|
|||||||