|
CSS - Explorer Issue , Option Width
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... Similar TutorialsHi. I have a table cell <td width="100%"> then a div <div style="width: 100%; height: 400px; overflow-x: scroll; overflow-y:scroll;"> then a table that are wider than td above. I firefox the div is not wider than the td above. In IE7 (not tested in IE6), the DIV does force the td above to be wider than it should. is there a way to make this work in IE7 as it should. Is it a bug in IE7? Any workarounds/ solutions for this?. If not possible to do with CSS then I would appreciate a workaround suggestion. Could I put an image or other element within the TD and set that width to 100% to make it as wide as the TD, and then user javascript to find actual pixelwidth of image or other element, and then use javascript to reset the width of the DIV..... Anybody??? Need it to work in IE6, IE7 and Firefox. Kinda odd situation. The first 3-column division is shown weirdly with CSS under Internet Explorer, but it works fine with FireFox The CSS'd page: http://www.trinijunglejuice.com/junglejuice_css.html The CSS: http://www.trinijunglejuice.com/css/styles.css The page it is meant to look like: http://www.trinijunglejuice.com/junglejuice.html If anyone can help me with a fix that'd be great Thanks Hello here, I am trying to make an opacity effect on my working site and I want to have the same effect in Internet Explorer as well in Mozilla browsers. I have been able to implement the correct code for both browser in the following page: http://www.looksheetmusic.com/test.html but for an "unknown" cause the same effect doesn't work in the complete page below: http://www.looksheetmusic.com/test2.html As you can notice, in Internet Explorer the opacity is not linear through the whole page. I left the CSS embedded in both pages for your review. Any idea or advice is very welcome! Thank you in advance. Sincerely, Fabrizio I just made some css changes on my site yesterday to redesign some pages, and I can't tell if it's all messed up in internet explorer or not. I'm a mac user but I always borrow my roommate's computer to check changes in IE. However, I'm now having an issue where internet explorer doesn't seem to want to show the latest changes, and it even seems to move stuff around into different places when I refresh the page. I tried one solution that didn't seem to do anything, which was changing the option of "check for newer versions of stored pages" under IE Internet Options from "Automatically" to "Every Visit to the Page". The layout of the website looks fine in safari/chrome/firefox and also looks fine on firefox on the PC. I can't think of any other reason why internet explorer would be acting so strange by not showing the latest version and often changing when I refresh the page. A web site I am working on is artepizzeria.com and for some reason it is not rendering correctly in internet explorer version 6. The content is just disappearing completely. Your help is much appreciated. -Troy Oltmanns Hey Everyone, I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much 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. 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;
}
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? 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. 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! 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 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) Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? |
|||||||