|
CSS - Right-image Cap Jumping To Next Row When Shrinking Firefox Width Brower
I am trying to teach myself doing a tableless website using css and I am starting with header then working my way down
I spent all day trying to serach a way to stop the right end image cap to jump down the next row when firefox width browser is shrinked down but it doesn't do that in IE .. Here the url http://www.prismaze.com/ it showing only the header right now and it what I am having issue with .. there are 3 images in it .. left and right and the background .. Here the html and css <body> <div id="logoheader"> <img src="templates/stlaware/images/stlaware_01.png" width="548" height="90" border="0" align="left" /> <img src="templates/stlaware/images/stlaware_05.png" width="55" height="90" border="0" align="right" /> </div> </body> </html> ------------------------ the css ------------------------ body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color : #FFFFFF ; } #logoheader { background: url(../images/stlaware_03.png) repeat; height: 90px; width: 100%; } How do you stop image on the right side of the header (stlaware_05.png) from wrapping to the next row if Firefox browser is sized down in width? Thanks .. Bill Similar TutorialsHI; Does the hover not support for the IE browser ? I am using a hover for buttons in IE browser, it does not has any reaction when the cursor is held over the buttons, but it does work in the Firefox, Netscape, and Opera browser. Could any one tell me why ? Thanks. My code as following; Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" >
body {
font: 80% arial, helvetica, sans-serif;
background: white;
margin:0;
}
#container{
position: relative;
width: 780px;
w\idth: 780px;
border: solid #036;
border-width: 0 3px;
margin: auto;
}
table {
position: absolute;
width: 700px;
margin: auto;
}
table td {
background: url(mybutton1.jpg);
background-repeat: no-repeat;
background-position: center;
width: 150px;
height: 50px;
text-align: center;
font-size: 20px;
color: white;
}
table td:hover {
background: url(mybutton2.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="container">
<table>
<tr>
<td> Home </td> <td> About Us </td> <td> Contact Us </td> <td> Help </td>
</tr>
</table>
</div>
</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. i need to shrink a div to the width of the text inside of it, i have no clue how to do this, i know i can display:inline, but then the form that it in the div gets left out, and i know i can float: it, but i want it to be centered. how can i do this I'm testing this page in FF 3.6, so at the moment, I don't really care what doesn't work in IE. As you can see in the code below, my page consists of a couple wrapper divs around a menu and info area. I did solid color backgrounds in the code below rather than the images I've been using to make this simpler to look at. Essentially, the outer wrappers allow part of the background image of the inner wrapper to disappear when the window is too small. In addition to that functionality, I also want the info area to shrink when the window gets even smaller than that. As it is currently, that almost works--the two wrappers shrink when I get below their max-width, but the info area does not shrink until the window is well within its max-width. Here's the code: Code: <html>
<head>
<style type="text/css">
body{
text-align: center;
}
#container {
background-color: red;
max-width:990px;
min-width:760px;
position: relative;
margin: 0 auto;
}
#content{
background-color: lightblue;
max-width:990px;
min-width:760px;
margin: 0 auto;
margin-left: -200px;
padding-left: 200px; /**allows 200px of background to disappear when window too small**/
text-align: left;
}
#menu{
background-color: #ffffcc;
width: 200px;
position: absolute;
left: -20px; /**allows hangover into disappearing background--no padding necessary since will be using img links**/
}
#info{
border: #000 1px solid;
max-width: 790px;
min-width:560px;
/**doesn't shrink when window below the max, even though container and content do**/
position: relative;
left: 180px; /**width of menu plus menu left **/
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="menu">
<img height="50" width="200" alt="link" /><br />
<img height="50" width="200" alt="link" /><br />
</div>
<div id="info">
<img height="500" width="400" alt="picture" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
Edit: I've found that if I make the menu relative positioned and position info absolute (and add top: 0px;) that I can get info to shrink properly. However, then the background from content is only as tall as the menu--which may or may not be shorter than the content in info. If I make the height of content 100% it looks ok, but not the way I'd like it to look. I can live with the extra background under the words in the case where there isn't enough to fill the whole height of the window, but if the window isn't tall enough for all the stuff in info, the background doesn't extend down far enough. Thanks for any ideas! Hey, I need to get a div to expand to the full width of a page in firefox. IE seems to do this automatically. Say I have this layout; Code: <div style="float:left; width:30px;">first column</div> <div style="float:left; width:100%;">second column</div> In firefox, this puts the second div on a new row and expands it to the full width of the page; | 30px | | 100% | I want it to stay on the same row as the first div, and use the available space; |30px| |left over width (100%)| I can get this working in IE but i'm struggling with firefox... Thanks for your time, -Ross Hi, I've been trying to integrate my blog into my website to look exactly the same. I am using the same style sheet for my blog as for the rest of my website. Somehow, my logo and fonts and pictures are all smaller on the blog than on the real site. I did a 'view source' and then pasted that into a file called test.php and testing different changes to my css from that file so it doesn't affect the rest of my site. The code is very similar between my regular site pages and my blog pages because I copied much of the header stuff directly into my blog template. I am totally perplexed as to the incredible shrinking page element dilemma. I'm not sure how much code to paste in here to get the best help. What do I need to provide you to help me troubleshoot? Any ideas? pe123 Hi there! My website (Yes.. I'm aware I use tables. Sue me. :P) has been driving me crazy CSS-wise. width:100% doesn't seem work right! Well, I know it does... but it hasn't been, and I have no idea why. As you can see in that page (and the forums too....) the black-bordered table underneath each subheader stretches too far in everything but Firefox. In Opera, not only does the black-bordered table stretch too far, but the subheading stretch... too little. O_o I am at a complete loss for words at this. Also, might I point out that when you visit a song on the site, the file type navigation (#sheetNav in the CSS file) works just fine? Any help would be GREATLY appreciated. For your convenience, here is the CSS file. Yes, it's something of a mess... forgive me. http://apollomix.com/master.css Thanks a lot! The template I am working on is a simple HTML page that I want to modify to work in Joomla. However the look of the site is not quite the same in Firefox (where it looks good) and IE8 where one part of it I could not make right for two days. The left sidebar is shorter and the content right side is shorter and not aligned. I am aware that is something small but I could not get it right. Please help. The URL is: compasstgdotcom/~orak the css in questions is: base.css Thank you all I use this in IE: <span style="width:22"></span> as a blank spacer. The 22 is actually calculated so it varies. Of course it does not work in Firefox. I get no spacing at all. What is the acceptable cross browser method of doing this? Thanks in advance. As simple as the problem sounds, Im completely puzzled by what could be going wrong. The problem is if I set the width of my div too 100%, it wont show up in Firefox. It works fine if I define it in pixels, but I want it to just stretch. Using a % works fine in IE. Here is the code: Code:
#left {
width:100%;
height:598px;
padding:0;
background: #EEF;
display: table-cell;
background: url("bg.gif") top left repeat-x;
}
Anyone have any ideas? Hi, I'm having a problem, I'm using the chunk of css code below to make a horizontal menu that I want to run across the 895 px #container that I've created. The menu fits perfectly in IE, but in firefox it overflows the last menu button the next line. How do I get the css menu to be the exact same width in firefox and IE?? Here's the css: Code: #snav ul
{
float:left;
width:100%;
padding:0px;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7.9em;
text-decoration:none;
text-align:center;
color:black;
background-color:#eed9ac;
padding:0.2em 0.6em;
border-right:1px solid black;
}
a:hover {background-color:#e7bb5b; text-decoration:underline; color:#9b2f1e}
li {display:inline}
Thanks for looking! Trying to delete my post but no option to delete so just removing content. Hi, can anybody help me stretch green buttons for Firefox just like they appear in IE? I'd greatly appreciate the help. Please see the attached html. Hello all! I've problem with firefox rendering's of span tag, the problem is in the width definition, the code is this: Code: <span style="width:100%; background:red">My name is Danny!</span> IE show me a 100% red row with the text instead Firefox show me only text with the backgroud color. Why this? is a Firefox bug or is not possible to assign width definition to the span tag?! Firefox 3.6 is showing a blank screen for everything I have set as 100% width but looks ok in Firefox 5. My main concern at this point is this: I'm trying to figure out how to move the 4 navigation items (the owl, contact, portfolio and home) closer to the tree without going over or under it. Any help or suggestions I can get are much appreciated! ------------------------------------- Here's the HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ATHENA STUDIOS - web design & graphic design in Charlottetown, PEI</title>
<link rel="shortcut icon" href="layout/hoot.ico" />
<link rel="stylesheet" type="text/css" href="athena.css" />
</head>
<body>
<div id="page-wrap"> <!-----page wrap div start------>
<div id="top"> <!-----top div start ------>
<img src="layout/header.png" alt="header image ATHENA STUDIOS WEB DESIGN, GRAPHIC DEIGN & FRONT END DEVELOPMENT" />
</div> <!-----top div end ------>
<div id="navbar"> <!-----nav bar BACKGROUND div start------>
</div> <!-----nav bar BACKGROUND div end------>
<div id="navigation"> <!-----navigation div start------>
<ul id="menu">
<li class="owl"><a href="index.html">Owl</a></li>
<li class="contact"><a href="/contact/">Contact</a></li>
<li class="portfolio"><a href="/portfolio/">Portfolio</a></li>
<li class="home"><a href="index.html">Home</a></li>
</ul>
</div> <!-----navigation div start------>
</div> <!-----page wrap end div------>
</body>
</html>
----------------------------------------- And here's the CSS: Code:
@charset "UTF-8";
/* CSS Document */
body {
width:100%;
font-size: 13px;
font-family: Helvetica, Verdana, Arial, sans-serif;
line-height: 1.4;
background: url(../layout/bg.png);
background-attachment:fixed;
margin:0;
padding:0;
text-align: center;
}
a, a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #31636c;
text-decoration: none;
}
a.footer:link {
color: #ddcfb2;
}
a.footer:hover {
color: #ddcfb21;
}
a.footer:visited {
color: #ddcfb2;
}
a.footer:active {
color: #ddcfb2;
}
#page-wrap {
width: 100% ;
margin: auto ;
text-align: center;
}
#top {
width:100%;
background:url(layout/skybg.png);
background-repeat:repeat-x;
text-align: center;
position:relative;
z-index: 500;
}
#navbar {
width:100%;
height:102px;
margin-top:-139px;
padding-top:15px;
background:url(layout/navbg.png);
background-repeat:repeat-x;
}
#navigation {
width:100%;
height:155px;
text-align:center;
margin-top:-154px;
}
/* Everything CSS Sprite Menu */
ul#menu {
text-align:center;
position:relative;
z-index: 501;
padding:0;
list-style:none;
clear:both;}
#menu li{overflow:hidden;
text-indent:-9999px;
display:inline;
text-align:center;
float:left;
margin-right:10px;}
#menu li a{background:url('layout/navigation.png') no-repeat; width:100%; height:100%; display:block;}
/* Owl Button */
#menu li.owl{width:158px; height:146px;}
#menu li.owl a{background-position:0px 0px;}
#menu li.owl a:hover{background-position:0px -2px;}
/* Contact Button */
#menu li.contact{width:150px; height:158px;}
#menu li.contact a{background-position:-158px 0px;}
#menu li.contact a:hover{background-position:-158px -2px;}
/* Portfolio Button */
#menu li.portfolio{width:238px; height:146px;}
#menu li.portfolio a{background-position:-308px 0px;}
#menu li.portfolio a:hover{background-position:-308px -2px;}
/* Home Button */
#menu li.home{width:114px; height:146px;}
#menu li.home a{background-position:-546px 0px;}
#menu li.home a:hover{background-position:-546px -2px;}
NEVER MIND. Got it. lol I'm trying to get my submenu lists to be the same width between IE and Firefox, but they aren't equal for some reason. I'm setting the width to 8em, but it's displaying differently between the two browsers. Here's a link to the page Here is my css: Code:
/*Set all elements to start out with margin:0 and padding:0*/
* {
margin:0;
padding:0;
}
body{
font-family: arial,verdana,sans-serif;
font-size: 100%;
height:100%;
background-color:white;
color:black;
behavior:url("./css/csshover.htc");
}
/* Needed to clearfix to clear out floats*/
* html .clearfix{
height:1%;
}
/* This class is used to clear out floats properly*/
.clearfix{
display:inline;
}
/* same as above */
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
img{
text-decoration:none;
border:0;
}
/*Tile Bar Container*/
#titleMenu{
position:absolute;
height:13%;
width:100%;
border-bottom:1px solid #003366;
z-index:1002;
}
#titleMenu h3{
position:relative;
float:left;
margin:15px 0 0 15px;
font-size:1.50em;
font-style:italic;
font-family:arial,sans-serif;
letter-spacing:1.5px;
word-spacing:2px;
color:#333366;
}
/* Main Menu of image categories*/
#titleMenu ul{
position:relative;
margin-right:60px;
margin-top:6px;
z-index:1003;
}
#titleMenu li{
position:relative;
list-style-type:none;
float:right;
padding:0 35px 0 0;
margin:0;
z-index:1099;
}
/* Sub menu*/
#titleMenu ul li ul{
position:absolute;
margin:0;
top:70px;
left:-1px;
width:8em;
z-index:1000;
}
#titleMenu ul li ul li{
width:100%;
letter-spacing:1px;
padding:0;
border-left:1px solid #BBBBBB;
border-right:1px solid #BBBBBB;
border-bottom:1px solid #BBBBBB;
background-color:#EEEEEE;
z-index:1001;
}
#titleMenu ul li ul li ul{
position:absolute;
margin:0;
top:-1px;
left:8em;
visibility:hidden;;
}
#titleMenu ul li ul li:hover{
background-color:#FFFFFF;
}
/* Sets the first element of ul li ul li ONLY*/
.titleMenuFirstItem{
border-top:1px solid #BBBBBB;
}
/* Style the links in the sub menu's*/
#titleMenu a{
display:block;
width:100%;
font-size:.55em;
text-decoration:none;
color:#003366;
padding:1px 6px;
}
#titleMenu a:hover{
/*none*/
}
/* Rollover functionality for dropdown menus*/
#titleMenu ul li ul{
display:none;
}
#titleMenu ul li:hover ul{
display:block;
}
/* Rollover functionality for popout menus*/
#titleMenu ul li ul li:hover ul{
visibility:visible;
}
/* iFrame Container holding the iFrame*/
#iFrameContainer{
position:absolute;
padding:1px 0;
top: 15%;
height:78%;
width:100%;
border-top:1px solid #BBBBBB;
border-bottom:1px solid #BBBBBB;
}
/* Container holding the footer */
#footer{
position:absolute;
width:100%;
height:4%;
bottom:0;
border-top:1px solid #003366;
background-color:#EEEEEE;
font-size:.65em;
}
#footer ul{
padding-right:5px;
}
#footer ul li{
list-style-type:none;
padding:5px 20px 5px 0;
float:right;
}
#footer a{
text-decoration:none;
color:#003366;
letter-spacing:1px;
}
#footer a:hover{
border-bottom:1px solid #003366;
}
Hello all. This is a problem I am encountering on many placing: when I put a width to an certain object (let's say 20px), and I want the text in the object to start and pixel 4px, I can use padding-left:4px; This is no problem in Internet explorer, but Firefox seems to make this object 4px wider. Instead of keeping the object 20 pixels, it becomes 24 pixels. Does anybody know how to get of this bug in Firefox? Please delete... The main body text in IE stays within the width I gave it, but in Firefox, it just goes off the div, its all not showing becasue I have the containing div overflow:hidden, but why won't it stay in the fixed width div, 603px, in Firefox like it does in IE? mediacontour.com/TCS/frequently-asked-questions.php The problem I have has arisen whilst trying to create a horizontal and a vertical navigation menu using <li> tags. It is best illustrated by the following example: Code: <div style="width:100%;height:50px;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> <br /> <div style="width:100px;height:100%;"> <ul> <li style="border:1px solid black;">Hello</li> <li>World</li> </ul> </div> and the CSS Code:
div {
border:0;
background-color:#888888;
}
ul {
margin:0;padding:0;
}
ul li {
float:left;
list-style:none;
background-color:#CCCCCC;
height:50px;
width:100px;
}
The <div> tags are set to 50px height and 100px width respectively. When an <li> element is placed within the div with the same height or width they display the way I intended. However once a 1px border is applied to the <li>'s then in IE the border is counted as part of the width or height. In Firefox the border will add 2px to the starting height and width giving the effect of width:102px or height:52px;. This is massively frustrating as I need each <li> to have the 1px border. It looks different in each browser (I have not tested it in netscape nor opera, but I suspect they will display the same as Firefox.) Can anyone provide a fix to get get round this please? Thank you in advance. |
|||||||