|
CSS - Repeat-y Not Seen In Mozilla
I am trying a technique at this site, http://www.anncompton.com/test. The format works in IE but not Mozilla. It seems to be the div's with a repeat-y that are failing. Below is a subset of the code - somewhere in this is the problem.
<!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=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" media="screen" href="test.css" /> </head> <body> <div id="page"> <div id="pagea"> <div id="pageb"> <div id="pagec"> <div id="header"><img src="images/Banner2.gif" alt="Ann Compton" name="logo" id="logo" /></div> <div id="sidebar"> <h5>Cell: 910-699-6919<br /> Res: 910-699-4441 </h5> <a href="mailto:ann@mindspring.com">ann@mindspring.com</a> </div> </div> </div> </div> </div> </body> </html> <!--body { background:#e5f6f4 url(images/huntbkg.gif); margin:10px 0; padding:0px 5px 15px 10px; font:small/1.6em Verdana, Arial, Helvetica, sans-serif; text-align:center; color:#333; } #page { background:#B8BFD8 url(images/pg_topright.gif) no-repeat right top; margin:0 auto; padding-top:0px; width:995px; text-align:left; } #pagea { background:url(images/pg_right.gif) repeat-y right top; width:995px; } #pageb { background:url(images/pg_bot.gif) no-repeat right bottom; padding:0 0px 20px 0px; width:995px; } #pagec { background: url(images/grnbar.gif) repeat-y top left; width:990px; } --> Similar TutorialsHello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? I am working on i hate mariah dot com and I can't get the background to repeat or be fixed no matter what I do. It keeps showing the page background. This is the code I have, what am I doing wrong!! Help! #art-page-background-simple-gradient { position: absolute; background-image: url('images/blogbg.png'); background-repeat:repeat-y; top:0; width: 1700px; height: 1200px; } Morning everyone. I am trying to create a background image that I can create a repeat from right to left so that people with very large monitors get a consistent looking background. I have no problem repeating from left to right with repeat-x but now I need to go right to left. Hi I have a page with the following HTML, which is linked into an external CSS:- <table width="50px" align="right" > <?php do { ?> <tr> <td class="ntext_time"><?php echo $row_news['timestamp']; ?></td> </tr> <tr> <td class="ntext_item"><?php echo $row_news['newsitem']; ?></td> </tr> <?php } while ($row_news = mysql_fetch_assoc($news)); ?> </table> I then have this CSS:- .ntext_time { FONT-SIZE: 11px; line-height: normal; COLOR: #0066FF; font-family: "Courier New", Courier, mono; position: absolute; left: 85%; height: auto; width: 20%; text-align: center; display: none; } .ntext_item { FONT-SIZE: 11px; line-height: normal; COLOR: #0066FF; font-family: "Courier New", Courier, mono; position: absolute; left: 85%; height: auto; width: 20%; text-align: center; Its for a news section down the right hand side of the screen. I need to be able to display repeat redgions, otherwise i only have one news item. What happens at the moment is because the BOX is set 50px or 70px from the top, then it repeats, but all the news items end up on top of each other, e.g. can't read them. What I need to do is have the first timestamp say 50px from the top, the first new item 70px from the top. Then the 2nd timestamp 100px, and the 2nd news item 120px, so they don't overlap. Any Ideas? JAKE I would appreciate some help on this problem of mine. I have working on this and can't really find a great answer for what I need my CSS to do. http://www.ambrelasweb.com/eshpi4/index.html I am trying to get the bg image (the people symbols) to reach to the bottom of the page for each different lengthwise page on this website without having to get a million <br> in there to make it continue down the page. Index Page: Code: <div id="symbolBG"><br /><br /><br /></div> <div id="wrapper">"All my other content"</div> CSS: Code:
#wrapper {
width: 1000px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -500px;
z-index: 2;
height: auto;
border-color: #FF0000;
border-width: 3px;
border-style: solid;}
#symbolBG {
width: 1350px;
text-align: left;
position: absolute;
top: 0px;
left: 50%;
margin-left: -675px;
z-index: 1;
background: url(images/symbolBG.jpg);
background-repeat: repeat-y;
text-align: left;
height: auto;
border-color: #993333;
border-width: 2px;
border-style: solid;}
I would appreciate any help anyone could provide. Thanks. I'm trying to vertically repeat a background image, but only in one way. Here is what I have right now: Code: background: white url(../images/side.gif); background-repeat: repeat-y; background-position: 612px 80px; I want the background image to start 80px from the top and repeat down, but NOT UP. Is there a way to do this? I'm trying to get a background image to repeat. The only way it works is if I actually declare the height ex: height: 1000px; If I don't declare it like that it simply doesn't appear at all. If I declare it as height:100%; it makes the background the height of the browser window, but it doesn't span the height of the entire page. Meaning that if the browser window is 800px tall, it'll only display 800px of background and anything beyond that is blank regardless of whether or not the content of the page extends past 800px. Here's the doc type and style I'm using. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> #container { position: absolute; text-align: left; width: 800px; background: url(homeback.jpg) repeat-y 100%; left: 50%; right: auto; bottom: auto; clear: both; margin-left: -400px; } I just finished coding a new layout but it seems to collaspe in IE even though it displays perfectly in firefox and netscape (almost). The link to the layout is: URL and the link to style sheet is: URL Also another thing I can't seem to get my container div background to repeat all the way through even though its set on repeat-y. Anyone have a idea on how to fix one of these problems? Thanks I am having a problem with back-ground repeat, it works fine in IE7 and most browsers except IE6 and lower, im not sure what to do? Website is: http://www.artandcraftsdirect.com/ currently i just use Code: background-image: url(images/layout/mem.png); to show an image as the background of a div, but if the image is smaller than the div it repeats. How do i stio it from repeating hi i just can't seem to get this problem. i have searched and tried everything. but i don't know what i am doing wrong. the background doesn't repeat in firefox. i want the background -- bg to repeat vertically. instead the content in the para tag overlaps on the footer. here's a short version of the code. Code: <body> <div id='bg'> <div id='banner'> <div id='logout'> <a href='../templates/home.php'>Home</a> <a href='../php/logout.php'>Logout</a> </div> <div id='menupos'> <!-- Menu for the site --> </div><!-- menu --> <p id='clear'> Content of the site </p> </div> <!-- banner --> <div id="footer"></div> </div> <!-- bg --> </body> </html> and following is the css :- Code:
body{
font-family: arial, helvetica, sans-serif;
color: #000000;
margin: 5px;
text-align: center;
vertical-align: top;
}
/* site background */
#bg{background: url(../images/bg.jpg) repeat-y;
width: 800px;
height: 37;
margin: 0 auto; /* firefox fix to center align the whole page */
}
/* site banner */
#banner{background: url(../images/banner.jpg) no-repeat;
width: 800px;
height: 492px;
}
/* site footer */
#footer{background: url(../images/footer.jpg) no-repeat;
width: 800px;
height: 71px;
}
/* menu position */
#menupos{padding-top: 20px; padding-left: 40px;}
/* Main Menu ul */
/* Remove all space and padding and list style */
#menupos ul{ margin: 0; padding: 0;}
/* displays all Main Menu links in one line*/
#menupos ul li{
position: relative;
display: inline;
float: left;
height: 50px; /* needed for menu_img & Sub Menu to render properly */
width:150px; /* Width of Menu Items to render the menu properly */
background: url(../images/menu_img.jpg) no-repeat;
}
/* Sub Menu ul */
#menupos ul li ul{
display: none; /*Make the sub list items invisible*/
position: absolute; /*when items appear, they come one below the other instead of in one line */
width:150px; /* Width of Sub Menu Items to render the sub menu below the main menu */
left: -1; /* to align right below */
top: 50; /* to align right below */
}
/*When hovered, make Sub Menu appear*/
#menupos ul li:hover ul{
display: block;
}
#menupos ul li ul li{
padding: 5px 0px 5px 0px; /* (Top-Right-Bottom-Left) Sub Menu items padding */
border-top: 1px solid #787878;
background: #B3B3B3;
text-align: left;
height: auto; /* to clear Main Menu height of 50px */
}
/* align logout and home to top right of page */
#logout{
margin-left: 735;
margin-right: 5;
padding-top: 55;
text-align: right;
}
/* to clear floats for para */
#clear{padding-top: 10px;
clear: both;
font-size: 10pt;
color: #C90514;
}
i want the site background :- /* site background */ #bg{background: url(../images/bg.jpg) repeat-y; to repeat vertically..but it doesn't. thank you have it display one on bottom left AND one bottom right? They are the same image, I just need it on both sides if possible. Hey there, thanks for any help in advance. I'm struggling to understand why an image is repeating even though I have it set to no-repeat. Any idea what's going on and how I can fix? Here is the site: 168.144.130.40:8080 The image that is repeating is the girl blowing bubbles: images/bath.jpg Thanks!! Matt Ok, I am building a site for a model and I have a stripped background for the left navigation. IE7 wont display it, but of course all the other browsers do. I cant post a link cause im a newbie to this forum, but I can post my code! any help would be great: Css Code Code:
.container {
width: 1000px;
margin: 0px auto;
}
.header {
background: url(../images/headerbg.jpg);
height: 200px;
width: 995px;
margin-right: auto;
margin-left: auto;
}
.background {
background: url(../images/backgroud.jpg) repeat-x;
width: 14px;
}
.leftnav {
background: url(../images/stripes.jpg) repeat;
float: left;
width: 150px;
color: #FFFFFF;
visibility: visible;
margin-right: auto;
margin-left: auto;
}
.maincontent {
background: #FFFFFF;
width: 487px;
margin-right: auto;
margin-left: auto;
padding-right: 5px;
padding-left: 5px;
text-align: left;
float: left;
}
.rightside {
background: url(../images/body.jpg);
float: right;
height: 461px;
width: 351px;
margin-right: 2px;
}
.border1 {
background: url(../images/border1.gif) repeat-x;
height: 14px;
}
XHTML Code Code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
<!--
body {
background: url(../images/temp_slices_03.jpg) repeat-x;
width: 1px;
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<div align="center">
<div class="container">
<div class="header">Content for class "header" Goes Here</div>
<div class="leftnav">Content for class "leftnav" Goes Here</div>
<div class="maincontent">Content for class "maincontent" Goes Here</div>
<div class="rightside">Content for class "rightside" Goes Here</div>
</div>
</div>
</body>
</html>
I am trying to manage the background repeat using CSS. I have tried as many html hacks as I can think of, but none seems to work. Here is a sample of my style sheet .content{ padding: 0px;margin:0px; width:961px;height:100%; float:left; } #bgLeft { width:5px;height: 100%; min-height: 100%; background: url(img/bg_left.gif) repeat-y; float:left; } #bgRight { background:url(img/bg_right.gif) repeat-y 100%; width:5px;height:100%; min-height:100%; float:left; } .bodyMain{ padding: 0px;margin:0px; width:735px;height:100%; background-color: #f8f8f8; float:left; } And here is a copy of my html <div class="content" align="left"> <div id="bgLeft"> </div> <div class="bodyMain" > <!-- ###CONTENT### --> </div> <div id="bgRight"> </div> </div> n.b.: the content of my site must have two lines images (one left and one right - see bgLeft and bgRight stylesheet), whose height depends on the content space. In IE7 I can see the bgLeft and bgRight images, but not for all the vertical height, in Firefox I cannot see anything. Any ideas? thanks I have a style sheet with a property that allows me to repeat an image from left to right. I want to go the opposite way, from right to left. Can I do this? How? So I've only been building layouts with CSS for 2 yrs now and I guess I've never really had this issue before (though I imagine it's an easy one). On the page I'm building I have a text area that starts off with a rough paper texture thats about 400 px tall (with text on top) and I want the rest of the text on top to overflow into a different y-repeat background image. I got it to work PERFECTLY in IE7, but firefox has been nothing but a pain. I know that I'm close since one browser is showing it correctly, but I need either a firefox-only fix or an overall fix that won't mess up the way IE7 displays it. To keep from posting the whole document I'll post the reference on my HTML page and the CSS itself (I can add more later if need be) CSS: Code: #textbgtop {
width: 886px;
min-height: 580px;
background-image: url(img/TextBGtop2.jpg);
background-repeat: no-repeat;
padding-left: 14px;
padding-right: 14px;
}
#maintextarea {
width: 886px;
background-image: url(img/TextBGrepeat.jpg);
background-repeat: repeat-y;
}
HTML REFERENCE: Code:
<div id="maintextarea">
<div id="textbgtop">
TEXT GOES HERE....I am running an DO WHILE statement that pulls content from a mySQL DB. The content is all displaying correctly. As it is, the page displays fine in IE7, but on firefox the top image is in the proper place, but the TextBGrepeat img is directly below it, and then the text overflows in the main page background, THEN the bottom nav bar is placed below that.
</div></div>
I don't know if I've provided enough information but does anyone see an obvious error? If not I can definately post more but I would need to modify some specifics. Thanks in advance for any help! -crazygol4 Hello, I am trying to automatically make my height of the website larger as more text is put in. It works fine with my center body div as it gets larger as i type more text into the site. However, the list i have in there isnt making it larger for some reason. here is my css code: html, body { margin: 0px; padding: 0px; background-color: #000000; } /**************************/ /**************************/ /**********LAYOUT**********/ /**************************/ /**************************/ div#container { margin-left: auto; margin-right: auto; margin-top: 20px; width: 963px; height: 100%; border-style: solid; border-color: #CC9900; border-width: 2px; } /*****HEADER*****/ div#header { background-color: Teal; width: 963px; height: 175px; } /****************/ /*****MIDDLE*****/ /****************/ div#middle { width: 963px; float: left; background-image: url('../images/left.png'); background-repeat: repeat; } /*****LEFT BOX*****/ div#leftbox { background-image: url('../images/left.png'); background-repeat: repeat-y; height: auto; width: 213px; float: left; } div#links { width: 213px; height: 375px; float: left; background-image: url('../images/links.png'); } /*****MIDDLE BOX*****/ div#centerbox { background-image: url('../images/body.png'); background-repeat: repeat-y; width: 535px; float: left; border-left: solid 1px #CC9900; border-right: solid 1px #CC9900; } div#title { width: 535px; height: 40px; border-bottom-style: solid; border-bottom-color: #CC9900; border-bottom-width: 1px; margin-top: 0px; } div#list { width: 535px; height: auto; background-image: url('../images/left.png'); background-repeat: repeat-y; } /*****RIGHT BOX*****/ div#rightbox { background-image: url('../images/left.png'); width: 213px; background-repeat: repeat-y; float: right; } div#news /*This is the title text for the news box*/ { width: 213px; height: 25px; margin: auto; } div#newsbox /*This is the news box div*/ { width: 199px; height: 199px; border: 0px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } div#events { width: 213px; height: 25px; margin: auto; } div#eventsbox { width: 199px; height: 199px; border: 0px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } /****************/ /*****FOOTER*****/ /****************/ div#footer { background: #333333; width: 963px; height: 55px; clear: both; background-image: url('../images/footer.jpg'); } /*****CONTACTS*****/ div#phone { float: left; width: 213px; height: 55px; text-align: left; } div#address { float: left; width: 535px; height: 55px; text-align: center; } div#e-mail { float: left; width: 213px; height: 55px; text-align: right; } /*****FLASH DIVS*****/ div#flashcontent { width: 963px; height: 175px; } /********************/ /*****PROPERTIES*****/ /********************/ /*****DIVS*****/ div.event1 { background-image: url('../images/event_1.jpg'); width: 210px; height: 150px; float: left; margin-left: 37.5px; margin-right: 20px; margin-top: auto; margin-bottom: auto; } div.event2 { background-image: url('../images/event_2.jpg'); width: 210px; height: 150px; float: left; margin-left: 20px; margin-right: 37.5px; margin-top: auto; margin-bottom: auto; } div.list { width: 535px; } div.listtext { width: 435px; } div.sublisttext { width: 335px; } /*****LISTS*****/ ul { text-decoration: none; margin-top: auto; margin-bottom: auto; margin-left: -10px; width: 213px; } li { list-style-image: url('../images/diamond_bullet_white.png'); width: 213px; height: 31.25px; margin: auto; line-height: 31.25px; } /*****ANCHORS*****/ a { text-decoration: none; color: #000000; width: 213px; height: 31.25px; margin: auto; } a.e-mail /*This is issued to any anchors for e-mail, addresses*/ { color: #000000; font-weight: bold; } a:active { color: Red; text-decoration: none; list-style: none; } a.contacts { margin: none; color: #FFFFFF; } /***PARAGRAPHS***/ p#contactinfo { color: #FFFFFF; font-size: 11.5px; height: 55px; margin-top: 6px; margin-left: 10px; margin-right: 10px; } p.title { color: #000000; font-size: 30px; text-align: center; margin-top: 0px; margin-bottom: 0px; height: 40px; } p.body { width: 500px; margin: auto; } p.boxtitle { font-size: 20px; text-align: left; margin-left: 7px; margin-top: auto; margin-bottom: auto; } p.subheader { width: 500px; font-size: 14px; text-align: left; font-weight: bold; margin: auto; } After hours, upon hours of trying to figure out what I did wrong, I've given in and i need to ask for help. Problem: The left Side Nav section BG stops toward the bottom for no reason. I want the left side to continue to repeat like the right side as new content is added. Website: Http://www.ihorde.wowstead.com CSS Code: Code:
body {
background:#000000 url(http://ihorde.wowstead.com/files/bg.jpg) no-repeat center 0;
color:#999999;
font-size:12px;
}
#header {
background:transparent url(http://ihorde.wowstead.com/files/header_tl.png) no-repeat scroll 0 0;
border:0 solid #FFFFFF;
clear:none;
height:190px;
margin:-15px 202px 0;
position:relative;
text-align:center;
z-index:52;
}
#header .title_name {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/header_tr.png);
background-position:right center;
background-repeat:no-repeat;
border:0 solid red;
color:transparent;
display:block;
font-size:0;
height:190px;
left:auto;
margin:0 0 0 auto;
position:relative;
top:0;
width:100%;
}
#header .title_realm {
display:none;
}
#contentarea {
margin:0;
}
#content {
background-color:transparent;
border:0 solid #FFFFFF;
left:-10px;
margin:0 220px 3px 0;
padding:0;
position:relative;
}
div#pagenavbar {
background:transparent url(http://images.wowstead.com/templates/nexus/wotlk/breadcrumb.png) repeat scroll 0 0;
border:1px solid #253039;
margin:0 230px 3px;
padding:1px 20px;
}
#leftnav {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/sidepanel.png);
background-repeat:repeat-y;
border:0 solid #FFFFFF;
display:block;
float:left;
height:1000px;
left:0;
margin-right:20px;
position:relative;
top:-175px;
width:220px;
z-index:50;
}
#rightnav {
background-color:transparent;
border:0 solid #FFFFFF;
display:block;
height:100%;
margin-left:25px;
position:absolute;
right:0;
top:-175px;
width:220px;
z-index:50;
}
#bg {
background:transparent url(http://ihorde.wowstead.com/files/sidepanel.png) repeat-y scroll right center;
min-height:1000px;
}
div.divheadline {
background-color:transparent;
background-image:url(http://ihorde.wowstead.com/files/headerdiv2.png);
background-position:center center;
background-repeat:no-repeat;
border:0 solid #FFFFFF;
color:#090909;
font-family:Copperplate;
font-size:16px;
font-variant:small-caps;
font-weight:bold;
height:39px;
margin-left:auto;
margin-right:auto;
width:180px;
}
div.divcontent {
border:0 solid #FFFFFF;
margin-left:auto;
margin-right:auto;
padding:4px;
width:180px;
}
#netbar {
background:transparent url(http://ihorde.wowstead.com/files/netbar.png) repeat scroll 0 0;
border-bottom:0 none;
height:37px;
}
.bordered .c {
background:transparent url(http://ihorde.wowstead.com/files/content_bg.png) repeat scroll 0 0;
padding:7px;
}
.bordered .tl {
background:transparent url(vborder-tl.png) repeat scroll 0 0;
}
.bordered .tr {
background:transparent url(http://ihorde.wowstead.com/files/border-tr.png) repeat scroll 0 0;
}
.bordered .bl {
background:transparent url(http://ihorde.wowstead.com/files/border-bl.png) repeat scroll 0 0;
}
.bordered .br {
background:transparent url(http://ihorde.wowstead.com/files/border-br.png) repeat scroll 0 0;
}
#footer {
background:#000000 url(http://ihorde.wowstead.com/files/netbar2.png) repeat-x scroll 0 0;
border-color:#FFFFFF #FFFFFF -moz-use-text-color;
border-style:solid solid none;
border-width:0;
height:37px;
margin:0;
padding-top:15px;
}
Someone please help! Hi everybody, i need some help figuring out some things with css and html: This is the CSS part of the code <style> .leftbanner{ background:url(leftbanner.jpg), right, repeat-y; } .topbanner{ height:100%; width:100%; background:url(topbanner.jpg), bottom, repeat-x; } body{ margin:0px; } this is the cell that i want the topbanner class to be used on. there are two more images in that cell but the strange thing for me is that i dont get any background image?!? any help ? <td colspan="2" align="center" valign="bottom" class="topbanner"> <img src="spacer40jpg" width="100%" height="1"> <br> <img src="kormrez.jpg" width="451" height="85"></td> |
|||||||