|
CSS - What The Bloody Fish... A Formatting Issue
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. Similar TutorialsNow I know how we all love Mac users, and the flawless ie5.x platform... but does anyone know how to prevent it rendering a little blue glow around all the buttons you click. The design I'm working on uses iframes to load content in a window on the page when a row of gif icons are clicked. It works fine on all but the client's machine which leaves those nasty blue borders round the buttons. Typical. I was recommended to try a:active {border: none;} but no joy. Is it a CSS thing or do I need to do something else? Thanks 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. 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? http://www.link-space.com/send.com/nav/template.htm Thats the current html file that I have 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>Untitled Document</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="slogan">Welcome to SEND.com your GIFT Headquarters!</div>
<div id="logo" title="SEND.com"><a href="index.htm"></a></div>
<h1>The International Gift Network</h1>
<div id="phone"></div>
<div id="navBox">
<ul id="primaryNav">
<li><a href="#">Liqour Gifts</a>
<ul>
<li><a href="#">Custom Gift Baskets</a></li>
<li><a href="#">Armagnac</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Bourbon</a></li>
<li><a href="#">Brandy</a></li>
<li><a href="#">Canadian Whiskey</a></li>
<li><a href="#">Cognac</a></li>
<li><a href="#">Cordials & Liqueurs</a></li>
<li><a href="#">Drink of the Month Club</a></li>
<li><a href="#">Gin</a></li>
<li><a href="#">Irish Whiskey</a></li>
<li><a href="#">Liquor Baskets</a></li>
<li><a href="#">Rum</a></li>
<li><a href="#">Scotch-Blended</a></li>
<li><a href="#">Scotch-Single Malt</a></li>
<li><a href="#">Tequila</a></li>
<li><a href="#">Unique Liquor Gift Bottles</a></li>
<li><a href="#" class="last">Vodka</a></li>
</ul>
</li>
<li><a href="#">Wine Gifts</a>
<ul>
<li><a href="#">Custom Gift Baskets</a></li>
<li><a href="#">Champagne</a></li>
<li><a href="#">Champagne Gift Baskets</a></li>
<li><a href="#">Sparkling Wines</a></li>
<li><a href="#">Wine-Red</a>
<!--<ul>
<li><a href="#">Barolo</a></li>
<li><a href="#">Bordeaux</a></li>
<li><a href="#">Burgundy</a></li>
<li><a href="#">Cabernet Sauvignon</a></li>
<li><a href="#">Grenache</a></li>
<li><a href="#">Malbec</a></li>
<li><a href="#">Nebbiolo</a></li>
<li><a href="#">Pinot Noir</a></li>
<li><a href="#">Sangiovese</a></li>
<li><a href="#">Syrah / Shiraz</a></li>
<li><a href="#">Tempranillo</a></li>
<li><a href="#">Zinfandel</a></li>
</ul>-->
</li>
<li><a href="#">Wine-White</a>
<!--<ul>
<li><a href="#">Chardonnay</a></li>
<li><a href="#">Riseling</a></li>
<li><a href="#">Pinot Grigio</a></li>
<li><a href="#">Dauvignon Blanc</a></li>
<li><a href="#">Viognier</a></li>
<li><a href="#">White Blend</a></li>
</ul>-->
</li>
<li><a href="#">Dessert Wines</a></li>
<li><a href="#" class="last">Port Wines</a></li>
</ul>
</li>
<li><a href="#">Flower Gifts</a>
<ul>
<li><a href="#">SEND Leis</a></li>
<li><a href="#">SEND Orchids</a></li>
<li><a href="#">SEND Protea</a></li>
<li><a href="#" class="last">SEND Wreaths</a></li>
</ul>
</li>
<li><a href="#">Gourmet Gifts</a>
<ul>
<li><a href="#">SEND Gift Baskets</a></li>
<li><a href="#">SEND Cakes</a></li>
<li><a href="#">SEND Caviar</a></li>
<li><a href="#">SEND Cheesecakes</a></li>
<li><a href="#">SEND Chocolates</a></li>
<li><a href="#">SEND Cookies</a></li>
<li><a href="#">SEND Fruits</a></li>
<li><a href="#">SEND Kosher</a></li>
<li><a href="#">SEND Liqueur Cakes</a></li>
<li><a href="#">SEND Rum Cake</a></li>
<li><a href="#" class="last">SEND Salmon</a></li>
</ul>
</li>
<li><a href="#" class="last">Specialty Shops</a>
<ul>
<li><a href="#">SEND African</a></li>
<li><a href="#">SEND Airplanes</a></li>
<li><a href="#">SEND Armoury</a></li>
<li><a href="#">SEND Birdhouses</a></li>
<li><a href="#">SEND Bridal</a></li>
<li><a href="#">SEND Chess</a></li>
<li><a href="#">SEND Chimes</a></li>
<li><a href="#">SEND Cigar</a></li>
<li><a href="#">SEND Egpytian</a></li>
<li><a href="#">SEND Executive Gift</a></li>
<li><a href="#">SEND Footstools</a></li>
<li><a href="#">SEND Leather</a></li>
<li><a href="#">SEND Lighthouses</a></li>
<li><a href="#">SEND Museum Jewelry</a></li>
<li><a href="#">SEND Music Boxes</a></li>
<li><a href="#">SEND Nautical</a></li>
<li><a href="#">SEND Picnic</a></li>
<li><a href="#">SEND Stained Glass</a></li>
<li><a href="#">SEND Ties</a></li>
<li><a href="#">SEND Vases</a></li>
<li><a href="#" class="last">SEND Weathervanes</a></li>
</ul>
</li>
</ul>
</div>
<ul id="secondaryNav">
<li><a href="#">Gift Certificates</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Live Support</a></li>
<li><a href="#" class="last">My Account</a></li>
</ul>
<div id="search"></div>
</div>
</div>
</body>
</html>
Thats the current css file that I have Code: @charset "utf-8";
/* neutralize browser styles */
body, html {
margin:0;
padding:0;
}
/* neutralize browser spacing for vertical elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
margin: 0;
padding: 0;
}
/*Container*/
#container {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
}
#header {
width:770px;
height:117px;
background: url(../images/header.jpg) no-repeat;
}
#header #slogan {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
color:#6A6A61;
font-weight:bold;
position:absolute;
top: 1px;
left: 26px;
}
#header #logo a {
background:url(../images/send.gif) no-repeat;
width:139px;
height:24px;
position:absolute;
top: 24px;
left: 26px;
}
#header h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-color: #3E606F;
font-weight:bold;
position:absolute;
top: 52px;
left: 26px;
}
#header #phone {
background:url(../images/phone.gif) no-repeat;
width:135px;
height:10px;
position:absolute;
top: 28px;
left: 604px;
}
#header #navBox {
border: 1px solid #DADADA;
width:513px;
height:26px;
background:#fff;
position:absolute;
top:80px;
left:17px;
}
#header #primaryNav,
#header #primaryNav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#header #primaryNav a {
display: block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
font-weight:bold;
color:#731818;
text-decoration:none;
padding: 4px 18px 5px 19px;
margin: 4px 0 4px 0;
border-right: solid 1px #BDAD73;
}
#header #primaryNav a:hover,
#header #primaryNav a:active {
padding: 8px 18px 9px 19px;
margin:0;
color:#fff;
background-color:#731818;
}
#header #primaryNav a:link.last {
border-right:none;
padding: 8px 18px 9px 19px;
margin:0;
}
#header #primaryNav li { /* all list items */
float: left;
}
#header #primaryNav li ul { /* second-level lists */
margin:0;
padding:0;
position: absolute;
border-left: solid 1px #D2C8A2;
border-right: solid 1px #D2C8A2;
width:100%;
left: -99999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
background-color:#FFF;
float: left;
display:block;
width:140px;
}
#header #primaryNav li ul li {
width:140px;
}
#header #primaryNav li ul li a {
margin:0;
padding:8px;
font-family:Verdana, Arial, Helvetica, sans-serif;
border-right: none;
}
#header #primaryNav li ul li a:link.last {
margin:0;
padding-left: 8px;
border-bottom: solid 1px #D2C8A2;
}
#header #primaryNav li ul a:hover,
#header #primaryNav li ul a:active {
padding:8px;
margin:0 auto;
color:#fff;
background-color:#731818;
}
#header #primaryNav li:hover ul ul,
#header #primaryNav li:hover ul ul ul,
#header #primaryNav li.sfhover ul ul,
#header #primaryNav li.sfhover ul ul ul {
left:-999em;
}
#header #primaryNav li:hover ul,
#header #primaryNav li li:hover ul,
#header #primaryNav li li li:hover ul,
#header #primaryNav li.sfhover ul,
#header #primaryNav li li.sfhover ul,
#header #primaryNav li li li.sfhover ul {
left:auto;
}
#header #primaryNav li:hover,
#header #primaryNav li.sfhover {
background:#333 none repeat scroll 0%;
}
#header #secondaryNav {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
position: absolute;
top:52px;
left:333px;
}
#header #secondaryNav li {
float: left;
}
#header #secondaryNav li a {
padding:2px 16px 2px 16px;
border-right:1px solid #E4D8B1;
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
}
#header #secondaryNav li a.last {
border-right:none;
}
#header #secondaryNav li a:link,
#header #secondaryNav li a:visited {
text-decoration: none;
color:#1D2326;
}
#header #secondaryNav li a:hover,
#header #secondaryNav li a:active {
text-decoration: underline;
}
#header #search {
border-top: 1px solid #DADADA;
border-right: 1px solid #DADADA;
border-bottom: 1px solid #DADADA;
position:absolute;
top:80px;
left:532px;
background:#EAE7E2;
width:223px;
height:26px;
}
Three issues. The menu does not fade away in IE - fixed Once highlighted on the submenu I can't get the text in the main menu to go white The menu "jumps" when I go from the main menu to the submenu Once these issues are resolves I will add in a sub sub menu. Hence son of suckerfish.. 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! 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... 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... I'm working on a project where the client wants a table of data, and one column of data is money, such as "$1.23". The client would like all the "$" aligned on the left side of the column and all the amounts aligned on the right side. Now I could do something like: Code: <td> <div style="float:left">$</div> <div style="float:right">1.23</div> <td> (Obviously I'd change those to classes.) That works, but it seems sloppy, so many extra divs for a tiny little formatting thing. I could also put the "$" into a background image, but then you lose something if you're using a screen reader. I looked into doing something with :first-letter, but there's no way to say "everything else but the first letter float right" without wrapping the amount in a span or div, which still seems sloppy to me. Is there another way to approach this, CSS or otherwise? Hello all, I'm trying to add digg stories to my site & want to format it with css. Digg says you can use CSS with the class names to customize the display. Havent use css before so I'm lost...if someone could hook me up with this I would sure appeciate it. I would like to be able to format the links and text differently. The code I want to use to add digg is: Code: <script language="JavaScript" src="(URL address blocked: See forum rules)/diggjs/front/tech_news/0" type="text/javascript"></script> I'm going to put it in a frame so just on a blank page. Thanx! Hi, I have changed my test site so I can display an ad and so that each section is separated into different sections, anyway after changing a few things and fixing a few problems I have found that the problem is happening with my #ContentMain except I have no idea how to fix it. Essentially #ContentMain is appearing before it should be (ignoring the formating and appearing behind everything) when it should be appearing directly after <div id="main1"> everything I have tried, I have had no success with. Also as I have separated the gap I had between the top links and the main picture to add in in ad section (no actual css setting for it as everything I have tried hasn't worked) Where as before my editing the content appeared where it was meant to, so any help would be greatly appreciated and if you need me to explain something in more detail let me know. TorqueSRO - Click 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>
I've run up against a css problem with the homepage on this site under development. In IE8 the right column in the main content area contains an image swapper and the column pushes out beyond the page content area. It displays properly in FF3. I've tried a variety of margin, padding and width changes without success. How do I correct this for all IE and FF browsers? To avoid bloat I have not included the stylesheet here, but it can be viewed in FF. 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. I am trying to style the <hr> in the following peice of my page using css selectors. I have used,
Code: td div hr {...}
, but this affects other hr's outside of this menu. Is there a way to make this work without having to give the hr a class name? Thanks. Code:
<td width="140" bgcolor="#EFBE56" class="Menu_WhiteText_GoldBkgd"><div align="left">
<p class="side_menu_white"><br>
<a href="In-The-News.htm" style="color: white">in the news...</a> </p>
<p class="side_menu_white"> <a href="Press_Releases.htm" style="color: white">press releases</a> </p>
<p class="side_menu_white"><a href="Newsletter.htm" style="color: white">newsletter</a> </p>
<p class="side_menu_white"><a href="Multimedia.htm" style="color: white">multimedia </a></p>
<p class="side_menu_white"><a href="../About/annual_reports.htm" style="color: white">annual reports</a> </p>
<p class="side_menu_white"><a href="Contact.htm" style="color: white">contact media relations & communications</a> </p>
<hr>
<p><span class="Menu_WhiteText_GoldBkgd"> <a href="PhotoRelease-ConsentForm.pdf" target="_blank">consent form</a> </span> <span class="Body_Text2"><span class="Body_Text"><br>
<br>
</span></span></p>
</div></td>
Hey guys, hit a problem with my div formatting in css. usig external style sheet with the two styles "header" and "regular". If i make the div class="regular" and then make the first line class="header" using the <a> tag without defining href (as it is not a link, and dont want it to be a paragraph). Then the content below the 1st line ends up superimposed over the 1st line. You understand what i mean? Hopefully this might be a common bug? Anyone know what is causing this? im using IE6.0 to check it for bugs. It is offline atm, as i am making it. but it can be made available if anyone needs to see it. Code: <div id="content" class="regular" style="top: 280px; background-color: F5DEB3; padding: 10px; padding-bottom: 0px;"> <a class="header">About New Zealand</a> <p>New Zealand is one of the most unique places in the world to dive. Its rich, nutrient-dense waters provide a home to a <a href="constructionpage.html" class="interlink">multitude</a> of exotic and amazing <a href="constructionpage.html" class="intralink">creatures.</a> Whilst many of the tropical wonders are summer visistors to our shores, there is an abundance of life all year round.</p> </div> Monkeewrench p.s sorry the code window is stuffed, first time using it, lol I have a table whose class is "dogs" How do I make all the <tr> elements within the table dogs have a certain style and not all the <tr> elements on the page? I posted a question about this in the HTML forum but maybe there is a CSS solution to my problem. I have a table that is filled with names from a database. It is filled with a first, middle , and last name. I want these to be displayed on one line and not put onto two lines. I have been using the <pre> tag but it makes my <td>'s two tall for my liking(only in IE). Is there something I can do make sure the name is displayed on one line and make sure the td is only as tall as the font that is used? Here's a snippet of the code. Code: <td><pre><a href="ViewProfile.pl?StudentID=$studentID[$x]">$firstName[$x] $middleInitial[$x] lastName[$x]</a></pre></td> 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? |
|||||||