|
CSS - Content Formatting Issue
I've run into a brick wall with a problem I'm having regarding text content that's inside a DIV container. To help illustrate the problem I've simplified the code I'm actually working on so that it can be presented here.
What's being done: There is a display div tag in which the text content. There is also a transparency layer within the container so I can have a semi-transparent background without having the text content suffer the same inherent transparency. That works fine. What's the problem: Well any text that's in that display div tag doesn't seem to be displaying any of the class formatting I'm putting on it. If I apply the formatting to the display div tag itself it shows. It also shows if I reformat the actual tags (like the <p>) but if I try to use span and apply a class to a specific portion or add a class to the <p> tag it doesn't show. Code sample is as follows: 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" lang="en" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html {
min-height:100%;
margin:0;
padding:0;
height:100%;
border:0;
}
body {
height:100%;
min-height:100%;
margin:0;
font-family: Arial, Helvetica, sans-serif;
font-size:10pt;
background-color:#000077;
background-attachment:scroll;
background-image:url(../site/bkg.jpg);
background-repeat:no-repeat;
}
/* Framing */
#screen{
margin:0;
padding:0;
border:1px solid #00ff00;
position:absolute;
left:705px;
top:268px;
width:149px;
height:182px;
background-color:#000000;
}
#logo{
margin:0;
padding:0;
border:1px solid #00ff00;
position:absolute;
left:156px;
top:18px;
width:503px;
height:45px;
background-color:#000000;
}
#display {
position:relative;
width:650px;
height:auto;
min-height:300px;
margin-left:10px;
margin-right:auto;
margin-bottom:0;
margin-top:160px;
border:1px solid #00ff00;
z-index:1;
color:#00ff00;
padding:5px;
}
#display .transparency {
position:absolute;
margin:-5px;
width:100%;
height:auto;
min-height:100%;
background-color:#000000;
z-index:-1;
opacity:0.75;
filter:alpha(opacity=75;
-moz-opacity:0.75;
}
.formatted {
text-align:justify;
text-indent:2em;
}
.yellow {
color:#ffff00;
}
.white {
color:#ffffff;
}
.yellowbold {
color:#ffff00;
font-weight:bold;
}
.whitebold {
color:#ffffff;
font-weight:bold;
}
-->
</style>
</head>
<body>
<div id="logo"></div>
<div id="display">
<div class="transparency"></div>
<p class="formatted">Something <span class="yellow">something</span> or <span class="white">something</span>.<span class="yellowbold">Something Else</span>.
</div>
<div id="screen"></div>
</body>
</html>
Any assistance or words of wisdom will be greatly appreciated. Thanks in advance. EDIT: From what I'm gathering it has something to do with the hierarchy revolving around Classes and ID Selectors. Apparently ID selectors take precedence over classes so placing a class on an element contained within the ID selector object doesn't show for some odd reason. What I'm trying to figure out is if it's possible to do at all or am I just shooting for the moon here? Similar TutorialsGuys, i've read a ton of posts here, and the quality of members is one of the best i've seen anywhere. so, i have high hopes for what you might suggest. Here's my deal: i have a table that is 254 pixels wide (you can see it at: (URL address blocked: See forum rules)/RSStest.php ) When text comes through the RSS feed that is wider than 254 pixels, the table border expands, and this throws off the formatting. If you check this link, it may not necessarily show the problem, but if you wait a while, when a long link comes through you'll see exactly what i'm talking about. I simply don't want the table to expand when long text comes through the RSS feed (which is long link strands, for the most part). I thought selecting "hidden" for overflow in the styles options would solve this, but it hasn't. Here are my CSS settings: .secondrssstyle { width: 254px; display: table-cell; text-decoration: none; overflow: hidden; position: relative; visibility: visible; } I can apply these styles to the table in the xsl file in Dreamweaver, but not the php file you actually see in the link i've posted. i don't think that's a big deal, b/c either way i can't get the tables to work. I seriously appreciate any help. Best regards. Hi all, I am in the process of writing a news script in php, i want to display the articles in a downward way, using divs.. I am having a problem in IE & firefox where the image flows out of the bounds of the div and overlaps in the following div whereas I actually want the div to contain the image so the next div will start below.. I can fix this in a number of ways in firefox (display: table; not sure if its right but it works), but nothing I try seems to work in IE, is there a correct way of doing this that will worth in both browsers? I have included the red border to demonstrate how it is overlapping over the other div.. 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=iso-8859-1"><title>GenerationQ - News</title>
<style type="text/css">
div.spotlight {
text-align: left;
border: solid 10px red;
}
div.spotlight * {
margin: 0 auto;
border: 0;
padding: 0;
}
div.spotlight img {
float: left;
}
div.spotlight p.title {
text-align: left;
font-size: 12px;
font-weight: bold;
padding-bottom: 12px;
}
div.spotlight p {
font-size: 12px;
}
div.spotlight p.desc {
font-size: 12px;
padding-bottom: 3px;
}
div.spotlight p.byline {
font-size: 9px;
padding-bottom: 20px;
}
div.spotlight span.username {
font-size: 11px;
}
div.spotlight span.publishdate {
font-size: 10px;
}
div.section {
text-align: left;
border: solid 10px red;
}
div.section * {
margin: 0 auto;
border: 0;
padding: 0;
}
div.section img {
float: left;
}
div.section p.title {
text-align: left;
font-size: 12px;
font-weight: bold;
padding-bottom: 12px;
}
div.section p {
font-size: 12px;
}
div.section p.desc {
font-size: 12px;
padding-bottom: 3px;
}
div.section p.byline {
font-size: 9px;
padding-bottom: 20px;
}
div.section span.username {
font-size: 11px;
}
div.section span.publishdate {
font-size: 10px;
}
</style></head><body>
<h3 align="left">News</h3><div class="spotlight">
<img src="be51273175be707e583f4c3591dd3c3d71564018.jpg" alt="">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-with-an-image%21-1">This a test article of Link type with an image!</a></p>
<p class="desc">This a test article of text type with an image!</p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
<div class="section">
<p class="title"><a href="http://localhost/mmm/viewarticle.php?article=This-a-test-article-of-Link-type-without-an-image%21-1">This a test article of Link type without an image!</a></p>
<p class="desc">This a test article of Link type without an image!<span class="smallText"></span></p>
<p class="byline">by <span class="username">Administrator</span> on <span class="publishdate">2006-08-29</span></p>
</div>
</body></html>
I have included the image as an attachment for easy of testing the code above so you can see what I mean! Hopefully someone could help? thanks in advance, regards // infin. Here's a story for you: Over the past few days, I've been experimenting with different bits of CSS to try and create a site - www . ridiculousity . net - and I've run into a snag. If you look at the source code, you'll see that there should be an image at the bottom of the page. This image should be centered by the body tag in my stylesheet (ridiculx.css), but instead it seems suspiciously absent. Additionally, I have a PHP include function calling to a newspost. According to my stylesheet (at least, as far as I can tell) the text should be showing up directly beneath the comic... Instead, it shows up at the far left of my content div. HOWEVER... When I remove the image that is supposed to be at the page's bottom, suddenly the text formats itself correctly. Finally, and regardless of what I do for whatever reason I can't seem to get my background to extend to 100% of the page's height. When it loads, it extends to fill the visible section of the user's browser window, but not beyond it. If anyone can help with any (or all!) of these issues, I'd be very grateful. Hello, I'm new to CSS but code is beginning to make more sense, for the most part. I've been able to transform an existing template into something more custom. The theme over all has turned out well and I'm happy with it. There is one snag that I'm running into and I really would appreciate someone with more experience and a better understanding of css framework to give me guidance. The issue: The "Comments/Respond" section for each blog post is getting pushed down rather far and there are odd little blue dots showing up to the right, just below the post itself, but before the beginning of the comments section. Now, I did try plugging the CSS code into the validation service and have found some warnings. The thing is, many of these issues were in the template (I didn't change them or edit them). So would the errors that the validation tool found be interfering with how the comment section is getting pushed down? Example of errors: Quote: 318 input[type="text"], textarea Property box-shadow doesn't exist in CSS level 2.1 but exists in : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 319 input[type="text"], textarea Property -moz-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 320 input[type="text"], textarea Property -webkit-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1) 823 .wp-caption Property -moz-border-radius-bottomleft doesn't exist : 3px 3px 824 .wp-caption Property -moz-border-radius-bottomright doesn't exist : 3px 3px 825 .wp-caption Property -moz-border-radius-topleft doesn't exist : 3px 3px 826 .wp-caption Property -moz-border-radius-topright doesn't exist : 3px 3px 1149 .submitbutton Value Error : float attempt to find a semi-colon before the property name. add it 1286 pre Property -webkit-text-size-adjust doesn't exist : 140% 140% 1289 code Property -webkit-text-size-adjust doesn't exist : 160% 160% 1296 #access, .entry-meta, .entry-utility, .navigation, .widget-area Property -webkit-text-size-adjust doesn't exist : 120% 120% 1299 #site-description Property -webkit-text-size-adjust doesn't exist : none none The thing is, I'm rather confused as to where to pinpoint the gap. In the CSS stylesheet the blog posts which are called out as "Content" live under an id called "Main". The comments seem to live under Main as well and seem to be in their own segment. I just can't figure out how to either pull the comment segment/table whatever you'd call it up more snug with the post, or eliminate whatever excess space is pushing comments down so far and causing the mysterious blue dots. I would post a link to what I'm talking about but I'm too new to the forum. Thanks in advance! Seems to be a recurring theme today. I'm trying to skin osCommerce to match the site. If you go into the front page of the store you'll see the problem. All content is correctly centered in FF, but not in IE. I tried putting a "wrapper" div around all the content (starts immediately after body tag and ends immediately before endbody tag), and set its margins to 0 auto, but no luck. Code: #wrapper {
width: 760px;
margin: 0 auto;
}
Any ideas? Here is the url: http://bradleyrose.net/WaterStreetRestaurant/pages/about_us.html The guy I'm building the site for says when he views the site, the pictures and copy in the 2 columns to the right of the navigation menu get pushed down to where the level of where the contact us button is. He is viewing the site on either IE6 or IE7 Any insight would be greatly appreciated. Close this, wrong forum. Sorry! Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently: 1) IE seems to put equal whitespace above and below the element 2) Firefox seems to put less whitespace AFTER the <h1> tag. Anyway to smooth this out so it displays close to similiar? My gratitude ahead of time... hi all, need one help from you.. i have to format a div tag which is generated dynamically.. if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar overflow:auto; overflow-x:hidden; height:200px; in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag.. can anybody help me... Ok, so I'm having some problems getting my site to look how I want. The formatting appears correctly in all browsers (I think) but in IE it's horribly messed up. This is my first site that I'm making just to learn some things and I don't know much CSS at all. I've tried reading up but am not sure how to properly use CSS to make this work cross browser capable. Basically, I want my text box search bar properly centered along with my logo and the "advanced search" and "preferences" links. I painted over some stuff for privacy heh. In FireFox, it looks like this ( http://img261.imageshack.us/img261/9625/ex1hu0.jpg ) but in IE, it looks like this ( http://img523.imageshack.us/img523/4631/ex2sm7.jpg ). So basically in IE the search bar and what not is aligned too high! How can I use CSS to make it looks like it does in FireFox, in all browsers!? I learn best by example so thanks much for any help!!! My probably terrible code is as follows: Code: <table>
<tr>
<td valign="middle">
<a href="/home"><img src="logo.jpg"></a>
</td>
<td valign="middle">
<form id="SearchBarForm" action="search.php" method="get">
<input type="text" name="q" size="30" maxlength="150" value="'.($q).'" title="Search">
<select name="FTS"> <!-- FTS = File Type Selections -->
<option value ="File_Type">File Type</option>
</select>
<font size=-1><input type="submit" name="Submit" value="Search"></form></font>
</td>
<td nowrap> <a href=/advanced_search.phpf>Advanced Search</a><br> <a href=/preferences.php>Preferences</a>
</td>
</tr>
</table>
Is there a way to use CSS to format printer output specifically for a sheet of paper such that page breaks can be formatted in at specific points? Hi, Can anyone please help with formatting a list? In the simple list below, I would like; 1) The main list items should always be positioned at top 0px, left 90px of it's container (done) 2) Nested list items should be hidden (done) 3) The nested item that belongs to the "selected" list item, should be visible (done) 4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this) 5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top) Many thanks for any pointers, Cheers, Mark 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>
<title>Untitled</title>
</head>
<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>
<div id="container"><div style="clear:both"></div>
<ul>
<li class="selected">item 1
<ul>
<li>Nested item 1</li>
</ul>
</li>
<li>item 2
<ul>
<li>Nested item 2</li>
</ul>
</li>
<li>item 3
<ul>
<li>Nested item 3</li>
</ul>
</li>
<div style="clear:both"></div>
</div>
</body>
</html>
Hi, I need help with formatting a calendar using CSS. Here's a list of the goals I'm trying to achieve: The day numbers are positioned in the top right corner of the cell. The event text is centered both vertically and horizontally within each cell. The day number doesn't affect the centering of the event text (i.e., it's as if it has zero width). I need to be able specify a minimum width and height for the cells. I have a png of the effect I am trying to achieve, but unfortunately I can't post it being a brand-new member. If seeing it would help, let me know and I guess I can PM the url to you. Update: Here's the link to the png: Code: http://tapestryfolkdance.org/images/calendar.png Below is what I've tried. However, the event text is not centered vertically within each cell, and the first couple of events are not centered horizontally in the cell. It is fine if the event text overlaps with the day number. Code:
<html><head><style>
table { text-align: center; border-style: solid; border-width: medium; border-spacing: 0px }
td { border-style: solid; border-width: thin; border-color: black; }
.day {
margin: 0px; text-align: center; font-style: bold;
border-style: solid; border-width: thin; border-spacing: 1px;
font-size: large; color: black;
float: right;
}
td {
text-align: center; color: black; font-size: small; min-width: 60px; min-height: 120px;
vertical-align: top;
}
</style>
</head><body>
<table>
<tr>
<td>
<div class=day>2</div>event 1<br></td>
<td>
<div class=day>3</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>4</div>event 1<br></td>
<td>
<div class=day>5</div>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>6</span>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>7</span>event 1<br>event 2<br></td>
<td>
<div class=day>8</div>event 1<br></td>
</tr>
<tr>
<td>
<div class=day>9</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>10</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>11</div>event 1<br></td>
<td>
<div class=day>12</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>13</div>event 1<br></td>
<td>
<div class=day>14</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>15</div>event 1<br>event 2<br></td>
</tr>
</table>
</body>
</html>
Hey All, I'm trying to make text float to the right, the challenge part of it all is that i need to try and do this using a class that get asigned to the text so i can't really use a DIV or anything to do this. Really what i want is a bunch of text in a text box aligned to the right with a grey background. Anythoughts or ideas? Really in a binde here. This appears to be strictly a formatting/style problem. I built a page using validated XHTML Strict and of course, it displays at it should in IE6: http://computerslayer1.spymac.com/formpics/IE---1.gif http://computerslayer1.spymac.com/formpics/IE---2.gif In Opera 8, it displays for the most part, but the table containing the AV/Periphrial radio buttons is shrunk and aligned to the left. Then, when one of the radio buttons are selected, it expands, and the right side of the table appears to be missing. http://computerslayer1.spymac.com/f...s/opera---1.gif http://computerslayer1.spymac.com/f...s/opera---2.gif Firefox 1.0.4 displays the tables in much the same was as opera, however, the right side is not missing, like in Opera 8. http://computerslayer1.spymac.com/f.../firefox--1.gif http://computerslayer1.spymac.com/f.../firefox--2.gif Any ideas, guys? I'm stuck. |
|||||||