CSS - Problem... Text Coming Out Of A Div...
The DIV is set to 100% height...
http://www.webpagedesignrus.co.uk/DECS/services.php Can you please tell me how to fix this? The site has to be done in 30 minutes... Please help, Thanks. Similar TutorialsThere is some text appearing below the footer (see red background colored area) in my layout in IE6 and I don't know why. Can someone please take a look at: http://rikahs.com/dermody/test.htm in IE6? Here is a screenshot of the text: Thank you. I am trying to design a template and have spent hours trying to figure out where I'm going wrong. I am fairly experienced, but am used to designing with tables and read that it's better to design with DIV tags and assign CSS to position the elements (http://www.csszengarden.com ). The URL to the site I am designing is: http://www.electracustomhomes.com/new.php Here is the XHTML code: 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" xml:lang="en" lang="en"> <head> <title>{sitename} - {title}</title> {metadata} {stylesheet} </head> <body> <div id="page"> <div id="template_header_top"> <div id="template_header_01"> </div> <div id="template_header_02"> </div> <div id="template_header_03"> </div> </div> <div id="template_header_bottom"> <div id="template_header_04"> </div> <div id="template_header_05"> </div> <div id="template_header_06"><div id="search">{search}</div></div> </div> <div id="template_left"></div> <div id="content"> <div id="sidebar"> <div id="menu"> {menu template='simple_navigation.tpl' collapse='1'} </div> <div id="news"> <h2>News</h2> {news number='3' detailpage='news'} </div> </div> <div id="main"> <h2>{title}</h2><div id="print">{print showbutton=true script=true}</div> {content} <br /> <div class="left49"> <p>{cms_selflink dir="previous" label=""}</p> </div> <div class="right49"> <p>{cms_selflink dir="next" label=""}</p> </div> </div> </div> <div id="template_right"></div> <div id="template_footer"> <div id="template_bottom_left"></div> <div id="template_bottom"></div> <div id="template_bottom_right"></div> </div> </div> </body> </html> And the CSS to accompany it: Code: * { margin:0; padding:0; } body { text-align: left; font-family: Arial, Helvetica, sans-serif; background-color: #620E0C; color: #000; } img { border: 0; } a, a:link a:active { text-decoration: underline; background-color: inherit; color: #620E0C; } a:visited { text-decoration: underline; background-color: inherit; color: #620E0C; } a:hover { text-decoration: none; background-color: inherit; color: #0000FF; } div#page { border: none; margin: 0 auto; width: 800px; color: #000; } div#content { clear: both; width: 775px; height: 100% !important; background-color: #ccc; color: #000; margin: 0px; padding: 0px; } div#template_left { height: 100%; width: 12px; background: url(uploads/images/template_left.jpg) repeat-y left top; float: left; } div#template_right { height: 100%; width: 12px; background: url(uploads/images/template_right.jpg) repeat-y right top; float: right; } div#main { width: 200px; height: 100%; float: right; } div#sidebar { width: 200px; height: 100%; } div#menu { width: 180px; height: 100%; } div#menu dfn { display: none; } div#menu li { list-style: none; } div#news { width: 180px; height: 100%; } div#template_footer { clear: both; height: 40px; color: #fff; background-color: #620E0C; margin: 0px; padding: 0px; } div#template_bottom_left { width: 12px; height: 40px; background: url(uploads/images/template_bottom_left.jpg) no-repeat left bottom; } div#template_bottom { width: 775px; height: 40px; background: url(uploads/images/template_bottom.jpg) no-repeat center bottom; } div#template_bottom_right { width: 12px; height: 40px; background: url(uploads/images/template_bottom_right.jpg) no-repeat right bottom; } I hope I've given all the information you might require... like I said, I really don't know why it's not working. Thanks in advance, Marcus This is kind of an odd situation. Hopefully someone who's better at CSS than I am can see what I'm doing wrong. Unfortunately, since I'm a new member to this forum, I can't post links to the pages in question. So I'll try to explain the situation the best way I can. I have a page that was originally created using one style sheet. Another webmaster in our company made some adjustments for me, but she attached a different style sheet, one that's used for another website, and used that for the changes. I've been trying to just incorporate the styles from her sheet into the original style sheet. I even took that style sheet and made a copy of it and put it in my folder. But there's something in her style sheet that sets the layout, so whenever I delete it, the formatting goes just a little off. I don't think I'm explaining this very well. Ideally, I'd like to just keep it all in one style sheet, but the page doesn't seem to like that. And I can't really modify the problem style sheet, because it's used by other pages. It's really hard to explain without viewing the two sample pages. Don't know the rules here yet, but maybe if somebody has a suggestion, I can send you the links and you can look at them yourself. If anyone understands this rambling mess, I'd really appreciate your help. Thanks, Ann Daman My text is going behind a image in ie but not firefox its the number at the top right. site here Code: /* CSS Document */ html { background: url(../images/bg.gif); background-repeat:repeat-x; } body { padding: 0; margin: 0; font-family: Myraid Pro, Arial , serif; } #wrapper{ width: 977px; margin: 0 auto; } #headertop { background: url(../images/top.png) no-repeat; width: 977px; height:41px; margin-top: 30px; } #headertop p { float:right; margin: 30px 30px 0 0; font-family: Myraid Pro, Arial , serif; font-size:20px; color: #9a151c } #header { background: #fff; margin: 0 0 0 9px; width: 960px; height:101px; } #logo { background: url(../images/logo.jpg); width: 314px; height: 77px; margin-left: 40px; } #nav { float: right; margin: -40px 20px 0 0; } #nav ul { list-stlye-type:none; } #nav li { display: inline; margin: 0 2px 0 9px; color: #000; } #nav a { text-decoration: none; color: #000; } #banner { background: #fff url(../images/banner1.jpg) no-repeat 25px 25px;; width: 911px; height: 297px; padding: 0 49px 0 0; margin: 0 0 0 9px; } hi, im attempting to build a page using dreamweaver cs4, the problem i have is... for example, i want this text BIG and this text RED but if i give the word big a class then this happens... i want this text BIG and this text RED but if i give the word red a class or the word big a class then this happens... how do i keep it all on the same line without a new paragraph being forced upon me?, i also wanted to start the paragraph with a larger font letter e.g W elcome thanks Hello, If you go to http://tombraiders.net/katie/sid/index.html User: letme Pass: in you'll see that the body text is shifted halfway down the page as well as the menu. Anyone know how I can fix this? Also, how can I fix the rollover for the menu? I don't want the rollover coloured square to be so long. Thanks! Hi Im a newbie to this site and to web page building so Im no sure if this is the right spot to be posting, but I think my problems are css related. Ive designed my web page with a 3 column layout the when I insert text into the left and middle columns the text starts from the top of the page like its ment to, but for some reason when I insert text into the right column it starts from the bottom of the page instead and I cannot work out why? Does anyone have any ideas? Is it css related or html? 2nd Issue how do I get the menu bar to float to the centre of the screen instead of the left? Ive tried so many things and it just make it worse. I know its hard without pics. Following on from an earlier thread I've split one problem off into the code below which can also be found at http://alphaworks.co.uk/test/float.htm The problem should be obvious from the text but just to confirm I want the left boundary of the text to be straight and not to flow back under the image as it is currently doing. I can do that with a margin-left:110px on the .description class but I'd rather have a solution which didn't depend on knowing the width of the image as this may well vary. Is there a way to do this? Thanks, Geoff Code: <html> <head> <style type="text/css"> .image { border : solid black 1px; margin : 5px; padding : 5px; float : left; } .description { } </style> </head> <div class="image"> <img src="" width="100" height="100"/> </div> <div class="description"> This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. This should be to the right of the image and should not flow underneath the image. </div> </html> So Im having this problem where when the user inserts a word with more than 15 chars with no spaces, that word will come out of my
Code: .product_wrap .title {width:120px;} Div. Code: <style type="text/css"> body {background:#CCC; padding:5px 5px 0px 5px; margin:10px 5% 0px 5%; min-width:210px; } /*PRODUCTS*/ .product_wrap {background:#FFF; margin:0px; min-width:210px; max-width:600px;} .product_wrap div {background:#093; margin:5px; padding:0px; min-height:100px; float:left;} .product_wrap .title {width:120px;} <style/> <body> <div class="product_wrap"> <!--Title--> <div class="title"><?php echo htmlentities($_POST['title']);?></div> </div> </body> How can I amend this? Thank you in advance. I'm trying to change over from coding HTML tables to using CSS and I'm still new at this. Thanks in advance to anyone who can help me out with this alignment issue. For the main content of this page, I'd like the text to be left-aligned, but it's showing up as centered. I'm hoping it's some obvious oversight on my part that someone might easily see and point out to me. Thanks! Here's my HTML: Code: <center> <div id="hpMaincanvas"> <? include('includes/topnav.php'); ?> <div id="aboutArea"> <h2>About VERVANO</h2> VERVANO was born as a solution to a problem in the furnishings world. Accustomed to having the world's resources at our finger tips through our connections with colleagues and vendors, internet research and in-person travel, the LBD team was at a lost for sourcing sustainable furnishings for their own space.<P> This compelling desire became a need which launched this eco-conscious furnishings line from the Laura Britt Design studio in Austin, TX.<P> Founded with the hope that our small input could have impact on the future of the design industry, the team has held fast to the sustainable sourcing and building model through all of the subsequent ups and downs. Although 'green' is now a standard buzz word it's not a standard practice. Each step of this process has been met with rigorous research and challenging sourcing.<P> Thankfully, VERVANO remains true to its original intent - built close to home using sustainable materials. Our interest lies in using materials which are rapidly renewed in nature, sustainably sourced and support a healthy indoor air quality through low VOCs.<P> It's still a long road until this is a mainstream way of designing, sourcing, and building furnishings- but we're doing our part to bring this step closer to home. Thanks for your interest and support of our endeavor. <br><img src="art/space.gif" alt="" height=12 width=1><br> <img src="art/laura.jpg" align=left alt="Laura Britt, founder of Vervano"><h2>About Laura Britt Design</h2> <span class="label">EDUCATION AND BACKGROUND</span><br> Ms. Britt earned a B.S. in Interior Design from Oklahoma State University in 1992. She went on to manage and design large scale, multi-million dollar interior design and architecture projects for the United States Air Force Academy. She later enrolled in the University of Texas at Austin in 2000 and received a Masters Degree in Architecture with emphasis in Sustainable Design. Through her architectural background she developed a contextual understanding of buildings as integrated systems. Following her graduation from the University of Texas she subsequently worked in complex hospitality design and architecture in Austin, TX, giving her a unique and real-world perspective regarding many attributes of public space design. <P> <span class="label">ON BUDGET, ON TIME AWARD WINNING COMPANY</span><br> Laura Britt Design is an award winning full service design firm. Value-added design, teamwork and attention to detail are at the foundation of each project. Starting with the specifications of the client, the firm integrates architectural and interior design solutions to create on budget, on time, functional environments. <P> <span class="label">SUSTAINABILITY & LEED</span><br> Laura Britt designs are based on the vision and mission of the end user. Laura Britt Design firm is recognized as a leader in sustainable design practices and has multiple LEED certified designers on staff. <P> <span class="label">OUR TEAM</span><br> The design team has approximately 75 years of cumulative experience and training. Each is professionally trained to identify the key factors driving the architecture and design and construction of each building project with the facilities team and architecture team. Our technical expertise includes cost estimating, utilization of CAD technology, project management, on site quality control inspection, specification of furnishings and finishes, space planning and 3D modeling and rendering. <P> <span class="label">Associations</span><br> Vervano is a proud member of the <a href="(URL address blocked: See forum rules)" target="new">Sustainable Furnishings Council</a>. <br><img src="art/space.gif" alt="" height=8 width=1><br> Laura Britt Design is recognized as a HUB by the State of Texas due to it's designation as a Woman Owned Business. HUB certification was granted in November or 2008. The firm is also listed on the states Central Master Bidders List. <br><img src="art/space.gif" alt="" height=8 width=1><br> Laura Britt Design is a member of The Best Practices Network - Interior designers committed to on-time, on-budget projects through continuing business education and the sharing of best practices.<P> </div> <? include('includes/footer.php'); ?> </center> Here's my CSS: Code: body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; color: #645133; background: url(art/bg.jpg); background-repeat: no-repeat; background-position: center top; } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 30px; font-weight: lighter; color: #49320f; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; color: #49320f; margin-top: -20px; font-weight: lighter; line-height: 36px; } #hpMaincanvas { position: relative; padding: 0px; width: 900px; margin-top: 35px; margin-left: auto; margin-right: auto; background-color: #ffffff; z-index:5; } #socialMedia { position: relative; font-family: georgia,palatino,serif; font-size: 12px; color: #bbb38c; line-height: 17px; font-style: italic; padding-right: 50px; width: 900px; text-align: right; } #MainArea { position: relative; padding-right: 50px; padding-top:0px; width: 900px; text-align: center; z-index:20; } #AboutArea { position: relative; padding-right: 50px; padding-left: 50px; padding-top:30px; width: 800px; z-index:20; text-align:left; } #footer { position: relative; text-align: center; } #navigation { position: absolute; top:40px; width: 600px; left: 320px; font-weight: normal; z-index:25; margin-left: auto ; margin-right: auto ; } li { list-style: none; float: left; position:relative; } ul { padding: 0; margin: 0; list-style: none; font-family: Helvetica, Arial, sans-serif; font-size: 12px; text-transform: uppercase; text-decoration: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; border: 1px solid #e2ddbe; } ul li a { display: block; text-decoration: none; text-align:left; color: #594425; padding: 7px 7px 7px 7px; white-space: nowrap; } ul li a:hover { color: #d93800; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; background: #efede1;; } li:hover a { } li:hover li a:hover { background: #ffffff; } .logo { position: absolute; top: 30px; left: 50px; } .label { font-family: Helvetica, Arial, sans-serif; font-size: 11px; text-transform: uppercase; line-height: 19px; letter-spacing: 2pt; color: #a99573; } .copyright { font-family:georgia,times,serif; font-size:11px; color:#beb692; text-align:center; } a.copyright, a.copyright:link, a.copyright:visited { text-decoration:none; font-family: georgia,times,serif; font-size: 11px; text-align:center; } a.copyright:hover { text-decoration:underline; } .middle, .submit { vertical-align: middle } I use centered css layout on my site. There is a problem with IE on one page. Sometimes main layer content comes hidden but only text content. Like this: http://img351.imageshack.us/img351/5152/hidden1zu.jpg When on mouse over to the table cells text comes. Like this: http://img351.imageshack.us/img351/1853/nothidden2pe.jpg No problem with Firefox or Opera. The page url is: http://www.limk.com/sonyorumz.php Can you help me about finding the solution? I have a menu with several links each of which has a span tag connected, when you hover over the link the span tag is revealed as a roll over text. However I have also made the whole page (the page size is controlled by JavaScript) an anchor tag and placed a span for that, so there is a default text which is replaced by the other roll over text. This works fine in Firefox. However, I'm having problems getting this to work properly in IE6. It doesn't reveal the span for the whole page, although the other links are ok, it also reveals the text if I hover over where the rollover text appears. I have validated the CSS and XHTML. Is there a way to fix this or am I going to have to go back to JavaScript? [code] css: body { background: url(images/sips_menu.gif) no-repeat; } a.con { z-index: 1; } a.menu { z-index: 2; } /*set whole page as an invisible link*/ a.con:link,a.con:visited,a.con:hover,a.con:active { background-color: transparent; display: block; border: none; position: absolute; top: 0px; left: 0px; width: 790px; height: 540px; text-decoration: none; cursor: default; } /*set span for whole page as visible only when hovering over page*/ a.con span { display:none; } a.con:hover span { color: black; font-weight: normal; display: block; text-decoration: none; font-size: 11px; font-family: arial, sans-serif; text-align: left; position: absolute; top: 125px; left: 580px; width: 170px; height: 150px; } /*menu links - when mouse is over these it is not over general page anchor*/ a.menu:link,a.menu:visited,a.menu:hover,a.menu:active { background-color: white; border: 1px solid black; color: #617AB2; font-size: 12px; font-weight: bolder; font-family: arial, sans-serif; text-decoration: none; text-align: left; padding: 4px 6px 4px 6px; } a.menu:hover { color: red; } /*menu link rollover text visible when mouse over*/ a.menu span { display: none; } a.menu:hover span { color: black; font-weight: normal; display: block; } /* Ids to position each of the menu links */ #one { position: absolute; top: 180px; left: 20px; } #two { position: absolute; top: 250px; left: 250px; } #three { position: absolute; top: 380px; left: 220px; } #four { position: absolute; top: 320px; left: 420px; } #five { position: absolute; top: 450px; left: 565px; } /* Ids to position the span tags*/ #a { position: absolute; top: -55px; left: 560px; width: 170px; } #b { position: absolute; top: -125px; left: 330px; width: 170px; } #c { position: absolute; top: -255px; left: 360px; width: 170px; } #d { position: absolute; top: -195px; left: 160px; width: 170px; } #e { position: absolute; top: -325px; left: 15px; width: 170px; } xhtml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>title</title> <link rel="stylesheet" href="menu.css" type="text/css" /> </head> <body> <p><a class="con" href="#"><span>text</span></a></p> <p><a class="menu" id="one" href="#">link<span id="a">rollover text</span></a><br /></p> <p><a class="menu" id="two" href="#">link<span id="b">rollover text</span></a><br /></p> <p><a class="menu" id="three" href="#">link<span id="c">rollover text</span></a><br /></p> <p><a class="menu" id="four" href="#">link <span id="d">rollover text</span></a><br /></p> <p><a class="menu" id="five" href="#">link<span id="e">rollover text</span></a><br /></p> </body> </html> I have a really wierd problem. I want to work with div's inside div's, so i will be able to make content scrollable. But i have this problem. (It is really hard to explain this without showing screenshots so i try to bend the forum-rules a bit ) scalesmusic DOT dk SLASH problem DOT jpg As you can see, theres an empty line before my headline. The stylesheet for this page is as follows. body { background-color: black; background-image: none); background-repeat: no-repeat; background-attachment: fixed; background-position: bottom right; margin: 10px; scrollbar-3dlight-color: #ff6600; scrollbar-base-color: black;} div { -moz-border-radius: 9px; padding: 5px; border-style: solid; border-width: 1px; border-color: white; background-color: #222222;} div div{-moz-border-radius: 4px; padding: 0px; border-style: solid; border-width: 1px; border-color: white; background-color: #222222;} p { font-family:courier new; font-size:14; color: white; text-indent: 10px;} a { font-family:courier new; font-size:16; color: #ff6600; text-decoration: none;} a:hover{font-family:courier new; font-size:16; color: #ff6600; text-decoration: underline;} h1 { font-family:courier new; font-size:32; color: #ff6600;} h2 { font-family:courier new; font-size:18; color: #ff6600;} h3 { font-family:courier new; font-size:16; color: white;} h4 { font-family:courier new; font-size:10; color: white; text-decoration: underline;} img { hspace:20; border-color: #ff6600;} .boxVisible {display: block;} .boxHidden {display: none;} I've made a testpage too, to locate the problem. scalesmusic DOT dk SLASH tester DOT jpg Here's no problems!?! The stylesheet looks as follows: div { -moz-border-radius: 9px; padding: 20px; border-style: solid; border-width: 1px; border-color: blue; background-color: white;} div div { -moz-border-radius: 9px; padding: 5px; padding-top: 0px; border-style: solid; border-width: 1px; border-color: black; background-color: #666666;} div div div{ -moz-border-radius: 9px; padding: 10px; border-style: solid; border-width: 1px; border-color: red; background-color: #888888;} p { font-family:courier new; font-size:14;} h { font-family:courier new; font-size:24;} Why this empty line?!? I have no idea what i am doing wrong! PS: I really don't like to bend the forum-rules, but i can't explain this problem in words alone! Firstly, excuse my title, I couldn't think of a better way to put it . Now to the problem. In my layout I have a floated object, and text that flows around it, I can pad the text away from this floated object by using margins on the floated object. But I have created a class for <p> that I want to be padded further, and if I add padding-left to p.quote (the class) it makes no difference because the padding is simply going behind the float... As rubbish as that explanation was, I expect someone will pick up on what I'm going on about. How can I have some text indented (padded) further away from the float than other ? Thanks in advance. I am relatively new to using div tags - transitioning from table tag to organize pages. I want the checkboxes to be aligned to the left inside a container that is centered in the body. Currently it is all aligned to the left for some reason. The body tag has no text-align or any other css rule manually set. Code: <div style="display: block;text-align;left;float: center;margin-left: auto;margin-right: auto; border: .1em solid;width:400px; position: relative; clear:both;"> <div style="display: block;text-align;left;float: left;margin-left: auto;margin-right: auto; border: .1em solid; position: relative; clear:both;"> <INPUT TYPE="CHECKBOX" NAME="cartoon">cartoon<BR> <INPUT TYPE="CHECKBOX" NAME="comicstrips">comicstrips<BR> </div> </div> thanks. Firefox: all looks fine except the checkbox container does not appear to be inside the surrounding container - the outer container div appears as a line (it's border) at the top of the inside div with the checkboxes IE8: on a test page with nothing else - appears as Firefox. In my page with several other divs it appears with one container inside another fine, but the main container is not centered. I have looked at several tutorials about float etc but...wits end... thanks. Hi, For SEO reasons I'm trying to add an < H1 > tag around some text and have that text appear as the other text in a paragrah. The problem is any text I put in the h1 tags don't seem to wrap in IE or NS. Instead, if it needs to wrap it puts it on the next line. For example, if I had something that looked like: The quick brown fox jumped over the fence and ate the cat And I surround "brown fox jumped" in h1 tags, in IE and NS it would look like: The quick brown fox jumped over the fence and ate the cat Does that make sense? Any solution to that? The style I'm using is simply Code: h1 { position:relative; font: 12px/14px Verdana; display:inline; margin:0; } TIA! Hello, I have slidedoor buttons on my website, which are enclosed inside table cells. The problem is that some of the button text a little long and when you shrink the browsers window, the text starts jumping to the next line. How do you make it so the text will always stay in one line? My site is displaying properly and in good way to the bullet that i've used in menu in FF. But in IE 7 bullet and text is too close which make menu un attractive. How can i fix this? any suggestion. if you want you can see nepalmedia . com . np thanks. |