|
CSS - Css 1, Netscape 4.x And Background+width Issue Need Workaround
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) Similar TutorialsHi, I'm attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean: So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards. The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it. There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions? Your help is appreciated. Thanks in advance! 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 I'm creating an email template for all mail that I'll send to my users. I'm trying to make it work for as many mail clients as possible, so I'm only using inline css. Even with that, it appears that gmail doesn't support the background-image property. I have a table defined as Code:
<table style="background:#666666; background-image:url(http://{$_SERVER['SERVER_NAME']}/images/bg_grad.gif); background-repeat:repeat-x; width:100%; height:100%; margin:0px; " cellpadding="0" cellspacing="0">
...
This works fine for yahoo mail. With gmail, it will render "background", but as soon as I try and add an image, it ignores all of the styling. Has anybody run into this problem? Any suggestions on a solution would be greatly appreciated. I want to have some small boxes of fixed width on a page, so I can change the background colour to create the appearance of "flashing lights". I've set the width property on the span tag. It works fine in Internet Explorer but not in Netscape. Any suggestions? Hi, I was curious to know why only the background shows up in Netscape. In IE this site works good. I had it working on Netscape before but now it doesnt. Thanks Have exhausted my knowledge base and hoping someone ou there can help. Trying to get Box1 to either autostretch to same the length as box2 & 3 or get the container background to show up in Mozilla & Netscape. Code: <head>
<style type="text/css">
<!--
body {
text-align: center;
margin: 0px;
padding: 0px;
background: #333;
}
.central {
margin-right: auto;
margin-left: auto;
position: relative;
width: 780px;
text-align: left;
}
#container {
float: none;
margin: 0 auto;
width: 780px;
text-align: left;
background: #AAA;
}
#top, #navbar, #middle, #footerblock {
float: left;
width: 780px;
}
#top {
background-color: #DDD;
height: 75px;
}
#navbar {
background-color: #EEE;
height: 25px;
}
#footerblock {
background-color: #666;
height: 25px;
}
#box1 {
background-color: #AAA;
float: left;
width: 260px;
height: 200px;
}
#box2 {
background-color: #BBB;
float: left;
width: 260px;
height: 400px;
}
#box3 {
background-color: #CCC;
float: left;
width: 260px;
height: 400px;
}
-->
</style>
</head>
<body>
<div class="central">
<div id="container">
<div id="top">top</div>
<div id="navbar">navbar</div>
<div id="middle">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
<div id="footerblock">footer</div>
</div>
</div>
</body></html>
Hello, I have two errors with the repeat background but i need to use this. How can i get round this? Cheers. Here is the site I am working on: http://testlableon.ourcampusbookstore.com/index.php There are 3 navigation bars on the template. The first one (navbar) is the black one right under the header. The second one (userbar) is right under the navbar and it is supposed to be light gray (#eeeeee). The third one is the at the bottom of the page (footerbar) and is supposed to have a black (#000000) background. If you look at the site in ie, all the background colors are displayed correctly. If you look at the site in firefox or netscape though, the userbar and footerbar are not having their background colors displayed. Any ideas? The CSS background-position: right; is not working in Firefox/Netscape, and just aligns the background image to the left. Know why? The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. On the main page of my site, I have a "slogan box" with a width set to 40%. This is outlined and has a background color. In IE, it outlines and colors in the blank space up to 40%, the desired effect. But in Firefox and Mozilla, it outlines only up to where the text stops. Here's the main css behind it: #slogan { border-bottom:2px solid black; border-right:2px solid black; border-left:2px solid black; background-color:#ABAABB; font-family:comic sans ms; width:40%; } Attactched is the screenshot from IE and firefox. How can I make it look like it does in IE for all browsers (i.e., what is the correct code?) The full code can be seen here. 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. 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? I'm pretty sure I know the answer to this unless there is a trick or hack....Can u set a background images height & width in a tag? I have a logo'd masthead that I need to reduce when the user wants to print the page. I know I can just create a print-specific image but, I thought I'd ask to see if there was a way to reduce the image thru .css??? thanks! Stephen 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! 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 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; } Hi, I have a background image that I want to incorporate into the header div of a fixed width layout. The header is of a gradient style - on the left it is a solid color and as you move along towards the right it fades to white. The image is 981x76. If I bring it into Gimp, I can scale it to 1920 x 76 and it looks the same. I would like to be able to do that in a div tag, with the image as a background. I would like the image to scale horizontally just like I can do using Gimp. Is this possible? Basically, I want the browser to manage the scaling of the image. |
|||||||