|
CSS - Width Issue With Ie
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? Similar TutorialsHi 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;
}
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 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) 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? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? Hello, (please also see attached/uploaded style sheet) I'm puzzled why (in the following code) the TEST #2 table renders as required (i.e. 2 rows in 1 column, all with the same cell WIDTH) but the table in TEST #1 seems to render the table cells (i.e. 2 columns in 1 row) without a common cell WIDTH. How can I get all the cells (there are plenty more!) in table TEST #1 to all be exactly the same width (preferably 85px)? Code: <link rel="stylesheet" type="text/css" href="http://thinet/cgi-bin/thinetStyleSheet.css"> TEST #1 <table class="menu" border=1 CELLPADDING=2> <tr> <td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td> <td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td> </tr> </table> <P> TEST #2 <table class="menu" border=1 CELLPADDING=2> <tr><td class="pinkButtons"><a title="Treats menu" href='http://thinet/theread/forumdisplay.php?s=&forumid=82'>Treats</a></td></tr> <tr><td class="pinkButtons"><a title="New Starters, Leavers and Transfers" href='http://thinet/theread/forumdisplay.php?s=&forumid=41'>Joiners etc.</a></td></tr> </table> I don't think I've quite grasped the idea of CSS yet?!?! Any help/pointers would be appreciated. Thanks, Andy I'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html Ok. Here's the problem: I have a asp.net 1.x datagrid inside a floated div and I want the datagrid to stretch the width of the div. This div is in the center of two other floated divs. Is there a way to make a table go 100% the width of its container div? Css code: Code:
/* left bar: */
#navBar{
width: 185px;
float: left;
}
/* right bar: */
#rightModulesContainer {
width: 130px;
margin: 0;
padding: 0px 0px 0px 10px;
float: right;
}
/* center content: */
#content{
padding: 0px 5px 0px 0px;
margin-top:0;
margin-bottom:0;
margin-left:4px;
margin-right:0px;
float: left;
text-align:left;
/*display: inline;*/
}
/* contained in #container: */
#dataGridContainer{
margin: 0;
padding-bottom: 10px;
min-width:360px;
}
.categoryGridStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
color: #000000;
width:100%;
}
and here is the layout of the divs: Code: <div id="navBar">left navigation bar here (tree view)</div> <div id="rightModulesContainer">right side bar here</div> <div id="content"><div id="dataGridContainer">datagrid here</div></div> Thanks for your help in advance. I've been messing with this for a while - trying to get it to work cross browser is driving me nuts. I've tried placing the divs in containers and floating the containers, I've tried everything I can think of... I have a page with an ASP.NET Gridview on it...this Gridview is located in a child DIV inside a parent DIV. That Gridview can often go wider than the parent DIV width set. In IE6 the MAINDIV (Parent DIV) would expand to fit the expanded Gridview contained within the child DIV. In IE7 the DIV will not expand so it overlaps the DIV and looks bad. I want that MainDiv to dynamically grow with the child DIV width, like it did in IE6. Please see my code below. I want the MainDiv to remain ~800px unless it is pushed out further. Thanks for any ideas on a fix for this. Whenever I try min-width it just blows the parent DIV out to 100% screen size. Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body style="width:100%;text-align:center;background-color:#68838B" onload="loadpage();">
<form id="frmMain" runat="server">
<div id="mainDiv" style="position:relative;top:10px;width:800px;height:auto; background-color:white;border:solid 1px #666666">
<div id="contentDiv" style="text-align:left;width:797px; padding:3px 3px 3px 3px;">
<asp:ContentPlaceHolder ID="contentBody" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
I have a header div with a background image - it's basically a pair of hands holding a banner - the arms extending to the sides of the window. I'm trying to work it so that, no matter how wide or thin the window, the arms will always extend to the sides. So when you make it smaller, the image will disappear beyond the viewing window. This happens automatically on the right-hand side, but the image is stopping it on the left. Is there a way to set a min-width, which is smaller then the image itself, so that when the window is shrunk the image starts to disappear on either side until it reaches the min-width? I'm trying to get it so the arms will disappear and stop at the hands. Or can anyone suggest an alternative solution? I tried to do it with background and header image, with the arms on the background, so when the top image moves it looks like the arms move with it. That worked great until I started using a patterned background. Full width: |---------------------------------------| |AAAAAAAAHHH BBBBBBBBBBBBBB HHHAAAAAAAAA| |---------------------------------------| Shrunk width: ------- |------------------------| -------- AAAAAAA |AHHH BBBBBBBBBBBBBB HHHA| AAAAAAAA ------- |------------------------| -------- Grey bit outside window edge. | Window side A Arms H Hands B Banner I hope that makes sense. I expect there's an easy solution but I've been trying to figure it out for several hours and could do with someone else's perspective. Thanks. Code: <tr class='firstrow'> <th width=10%><strong>Rank</strong></th> <th width=40%><strong>Site</strong></th> <th width=25%><strong>In</strong></th> <th width=25%><strong>Out</strong></th> </tr> that makes it exactly the way i want, but when i switch to Code: <tr class='firstrow'> <th style='width=10%'><strong>Rank</strong></th> <th style='width=40%'><strong>Site</strong></th> <th style='width=25%'><strong>In</strong></th> <th style='width=25%'><strong>Out</strong></th> </tr> it is sized naturally. |
|||||||