|
CSS - Wordpress Theme Formatting Issue For Comment Section
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! Similar TutorialsHey Guys, I hope this is in the right forum. I've purchased a wordpress theme and it contains a video background using JWPlayer. Part of the JWPlayer functionality is that it allows play/pause control when hovering over the video and a "hover hand" replaces the regular cursor. I'd like the cursor to stay the same at all times, and remove the ability to play/pause the video. So it's essentially just a regular looking background that's a video. I've done some searching online and it appears this is possible by placing a transparent div frame over the entire page with a cooresponding z index. Seems easy enough, but I'm not very familiar with CSS and the more I look online for the best way to go about this, the more confused and lost I'm getting. Can anybody shed some light on the best way to go about this? Certainly it must be quite straightforward? I'm trying to edit a free Wordpress theme called "Imprezz 1.3" so that the date of each post is displayed about 20 pixels more to the left. Here's a picture of what I'm going for: i.imgur.com/l2EyM.png I've tried to mess with positioning and z-index in the stylesheet for .postTime, .postDay & .postEra without much success (I get the div to move but the part that's supposed to be 'sticking out' of the page doesn't show). Any help would be much appreciated! Thx I have a pretty awesome looking wordpress theme. I was wondering if someone could guide me through making a small change to it though! Firstly, here is the page now: theangrywalrus.com/blog What I would like to do, is take the black bar at the top and stretch it so it goes under the title of my site, and ends near where the 'content' starts. Then I'd like to move the gradient bg image down so it starts under where the black bar ends. So far, using the firefox web dev plugin, I've only been able to get the black bar/gradient working in one part of the page, where the content is. How can I get it to be how I want it? Could someone show me how to get this done please? I'd really appreciate some help. My style sheet is he theangrywalrus.com/blog/wp-content/themes/simpla/style.css I'm new to this site and I'm hope someone is kind enough to help with this CSS issue. I'm running a blog on the wordpress platform usig Coraline theme, I tweaked the CSS style sheet to add a background and opacity for the content container. The problem is with margins inside the content container, when I add padding larger than 0PX mybsidebars move to bottom of the site. I've tried a lot of changes but nothing seems to work. I've attached part of the content container code below and thanks in advance. container { clear: both; margin: 0 auto; opacity: 0.978; } #content-container { background:#E5E5E5; width: 100%; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #main-sidebars { max-width: 450px; width: 45.5%; } #feature { width: 100%; float: left; } #primary, #secondary { overflow: visible; } #footer { clear: both; width: 100%; } Above is the code for the options I'm using for the site. The sites name is hhrapinfo dot com. Hey Guys I am new to CCS. I started a blog about 2 weeks ago and I am using a domain/host with WordPress installed. I have a premium theme. I am very happy with the theme but I do not like the color/type/size of the contents font. I went into theme editor > stylesheet and began looking for something that would tell me where the code for the content would be. I changed the first few colors, refreshed the page and nothing changed. I did this about 20 times.... and I still can't find the code for the font! Please Help! Original Style Sheet Code: Code: body { background:#083550 url(images/bg_main.jpg) repeat-x top; font:12px Arial, Helvetica, sans-serif; padding:0; margin:0; color:#101010;}
html { padding:0; margin:0;}
a { text-decoration:none; color:#292929; border:0;}
a:hover { text-decoration:underline; color:#292929; border:0;}
a:focus { outline:none;}
.clr { clear:both;}
h1, h2, h3, h4 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
img { padding:0; margin:0; border:none; text-align:center;}
hr1 { border-left:0 solid #000000; border-right:0 solid #000000; border-top:0 dotted #000000; border-bottom:1px solid #000000; height :1px;}
hr { border-left:0 solid #7f262e; border-right:0 solid #7f262e; border-top:0 dotted #7f262e; border-bottom:1px solid #7f262e; height :1px;}
form { padding:0; margin:0;}
input { font-family:'Verdana'; color:#282b31; font-size:11px;}
textarea { font-family:'Verdana'; color:#282b31; font-size:11px;}
select { font-family:'Verdana'; color:#282b31; font-size:11px;}
/* Header +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#bgcontainer { margin:0; padding:0; background:url(images/bg_top.jpg) no-repeat top;}
.bgRasize { width:1024px; margin:0 auto; padding:0;}
/**/ * html .Header { height:197px;} /* */
.Header { width:1024px; margin:0; padding:0; height:197px;}
/* Menu ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.Menu { padding:0; margin:0; height:50px; width:1024px; float: left;}
.Menu ul { list-style:none; margin:0; padding:0; height:50px;}
.Menu ul li { padding:17px 0 0 0; margin:0; float:left; line-height:14px;}
.Menu ul li a { padding:5px 15px 5px 20px; margin:0; outline:0; background:none; font:normal 12px Georgia, "Times New Roman", Times, serif; color:#50bed2; text-transform:uppercase;}
.Menu ul li a:hover { font:normal 12px Georgia, "Times New Roman", Times, serif; color:#d9d9d9; text-decoration: underline;}
.Logo { width:1024px; height:147px; margin:0; padding:0;}
.LogoText h1 {letter-spacing:-2px; padding:15px 0 5px 0; margin:0; font:normal 36px Georgia, "Times New Roman", Times, serif; color:#fff; text-align:center; text-transform:uppercase;}
.LogoText a { color:#ffffff; text-decoration:none;}
.LogoText a:visited { color:#ffffff; text-decoration:none;}
.LogoText a:hover { color:#ffffff; text-decoration:none;}
.Desc { color:#92dffd; line-height:12px; font:normal 14px Georgia, "Times New Roman", Times, serif; padding:0; margin:0; text-align:center; text-transform:uppercase;}
/* Syndicat ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.Syn { width:325px; height:51px; padding:0; margin:0 0 0 10px; background: url(images/rss.gif) 0px 5px no-repeat; float:left; border-right:1px solid #fff;}
.Syn ul { margin:0; padding:5px 0 0 50px;}
.Syn li { margin:0; padding:0; list-style-type:none; color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif;}
.Syn li.text { color:#fffefe; font:normal 10px Arial, Helvetica, sans-serif;}
.Syn li a { color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif; text-decoration:underline;}
.Syn li a:visited { color:#1e8baa;}
.Syn li a:hover { color:#1e8baa;}
/* Syndicat ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + */
.twit { width:300px; height:51px; padding:0; margin:0 0 0 10px; background: url(images/twitter.gif) 0px 5px no-repeat; float:left; border-right:1px solid #fff;}
.twit ul { margin:0; padding:5px 0 0 50px;}
.twit li { margin:0; padding:0; list-style-type:none; color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif;}
.twit li.text { color:#fffefe; font:normal 10px Arial, Helvetica, sans-serif;}
.twit li a { color:#1e8baa; font:bold 18px Arial, Helvetica, sans-serif; text-decoration:underline;}
.twit li a:visited { color:#1e8baa;}
.twit li a:hover { color:#1e8baa;}
/* Search ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/**/ * html .Search {} /**/
.Search { width:300px; padding:0; margin:0 0 0 10px; float:left; height:51px; border-right:1px solid #fff;}
.Search form { padding:10px 5px 0 5px;}
.Search h2 { padding:5px 20px; color:#979797; font:bold 18px Tahoma, Arial; margin:0; background:url(images/bg_searth_h2.gif) left no-repeat;}
.Search input { color:#ffffff;}
.Search input.keyword {border:1px solid #b4b4b4; width:190px; color:#b4b4b4; padding:6px 10px; height:15px; float:left;}
.Search input.search { border:none; background: url(images/search.gif) top no-repeat; height:30px; width:30px; padding:0; margin:0 5px; float:left;}
/* Container +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.CON { width:1024px; padding:0; margin:0; background:#fff;}
/* Side Central +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SC { width:570px; padding:20px; margin:0; float:left; font:normal 11px Georgia, "Times New Roman", Times, serif; color:#888888;}
.SC p { padding:5px; margin:5px 0;}
/* Post +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.pagetitle { color:#848484; font:normal 26px Georgia, "Times New Roman", Times, serif;}
.Post {padding:10px; margin:0 0 10px 0; border:1px solid #ededed; background:#f6f6f6;}
.PostHead { padding:0; margin:0;}
.PostHead h2 {color:#2e2e2e; font:bold 20px Arial, Helvetica, sans-serif; margin:0; padding:10px 0;}
.PostHead h2 a { color:#2e2e2e; text-decoration: none;}
.PostHead h2 a:visited { color:#2e2e2e; text-decoration:none;}
.PostHead h2 a:hover { color:#2e2e2e; text-decoration: none;}
/**/ * html .PostTime {} /**/
.PostTime { padding:5px 0 5px 10px; font:normal 11px Georgia, "Times New Roman", Times, serif; color:#fff; margin:0; background:url(images/bg_post_time.gif) top repeat-x;}
.PostTime strong { font:normal 11px Georgia, "Times New Roman", Times, serif; color:#fff;}
.PostTime .day { font-size:11px;}
.PostTime .month { font-size:11px;}
.PostTime .year { font-size:11px;}
.PostTime a { font:bold 11px Georgia, "Times New Roman", Times, serif; color:#fff; text-decoration:underline;}
.PostContent a { color:#989898; text-decoration:underline;}
.PostContent a:hover { color:#989898; text-decoration:none;}
.PostContent img { margin:0; padding:0;}
.PostContent ol { padding:10px 0 10px 25px; margin:0;}
.PostContent ol li { padding:2px 0 2px 0; font-size:12px; line-height:15px; color:#989898;}
.PostContent ul { padding:5px 0; margin:0; float:left; width:45%;}
.PostContent ul li { padding:2px 0 2px 15px; list-style-type:none; font-size:11px; line-height:15px; color:#989898;}
.PostContent blockquote { padding:10px; margin:0; color:#989898; background:#000;}
.PostContent blockquote p { font-size:12px; padding:0; margin:0; line-height:15px;}
.PostContent blockquote li { padding:2px 0 2px 15px; list-style-type:none; font-size:12px; line-height:15px;}
.PostContent blockquote a { color:#989898;}
.PostContent blockquote a:visited { color:#989898;}
.PostContent blockquote a:hover { color:#989898; text-decoration:underline;}
.PostContent strong { color:#373737; font:normal 12px Arial, Helvetica, sans-serif; text-transform:uppercase;}
/**/ * html .PostContent p img {} /* */
.PostContent p img { max-width:350px;}
.PostContent img { margin:0 10px 10px 0; float:left; background:#0d0e09; padding:3px; border:1px solid #a3a3a3;}
.PostCom { padding:10px; font:normal 11px Arial, Helvetica, sans-serif; color:#797979; margin:0; background:url(images/bg_com.gif) left no-repeat;}
.PostCom ul { padding:0 10px; margin:0;}
.PostCom li { padding:5px 0; margin:0; list-style-type: none; color:#797979; font: normal 11px Arial, Helvetica, sans-serif; display: inline;}
.PostCom li a { font-weight:normal; text-decoration:none; color:#797979;}
.PostCom li a:hover { font-weight:normal; text-decoration: underline; color:#797979;}
.PostCom .Com {}
.PostCom .Tags { padding-left:10px;}
/* Note ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.Note { padding:0; margin:0;}
.Note li { padding:3px 0 3px 15px; margin:0; list-style-type:none; font-size:12px;}
/* TrackbackList ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.TrackList { background:#848484; padding:15px; margin-top:20px; position:relative;}
.TrackListTop { background:#848484; position:absolute; top:0; left:0; width:455px; height:10px;}
.TrackList h3 { font-size:14px; font-weight:bold; margin:0 0 5px 0; padding:0 0 5px 0; color:#333366; letter-spacing:-1px; border-bottom:dashed 1px #beb4c1;}
.TrackList ul { padding:0; margin:0;}
.TrackList li { padding:0 0 0 10px; margin:0; list-style-type:none; font-size:11px;}
.TrackList li a { color:#cc3366;}
/* Navigation - PlugIn +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Nav { font-size:11px; padding:10px 0; color:#848484; font-family:'Verdana';}
.Nav a { padding:1px 6px 1px 4px; border-right:solid 1px #666; font-size:11px;}
.Nav a:visited { padding:1px 6px 1px 4px; border-right:solid 1px #666;}
.Nav a:hover { padding:1px 6px 1px 4px; border-right:solid 1px #666; text-decoration:none;}
.Nav span { padding:1px 6px 1px 4px; color:#666; border-right:solid 1px #666;}
.Nav .on { padding:1px 6px 1px 4px; border-right:solid 1px #666; font-size:11px; color:#003366;}
/* Comments ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Comments { margin:20px 0 0 0; position:relative;}
.Comments h3 { font-size:16px; letter-spacing:-1px; margin:0 0 5px 0; padding:10px 0; color:#848484; border-bottom:solid 2px #660000;}
/* Comments List ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.List ol { padding:0; margin:0;}
.List li { position:relative; padding:5px 0; margin:10px 0; list-style-type:none;}
/**/ * html .List .LGrav { right:30px;} /* */
.List .LGrav { position:absolute; right:0; top:10px;}
.List .LGrav img { border:solid 1px #ccc; padding:2px; background:#fff;}
.List .LUsr { margin:0; padding:0; font-size:11px; line-height:12px; color:#999;}
.List .LUsr a { color:#999; text-decoration:none;}
.List .LUsr strong { font:bold 16px "Trebuchet MS", sans-serif; letter-spacing:-1px; color:#666;}
.List .LUsr strong a { color:#cc0000; text-decoration:none;}
.List .LCon { margin:10px 0 0 0 ; padding:0; font-size:12px; line-height:16px; border-top:solid 1px #ccc;}
.List .LCon p { margin:0; padding:5px 0 ; font-size:12px; line-height:16px;}
.List .Author { background:#fff;}
/* Comments Form ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.Form .Email {}
.Form { padding:0 0 10px 0 ; position:relative; margin:0; font-family:'Verdana';}
.Form form { margin:0; padding:0;}
.Form a { text-decoration:underline;}
.Form p { padding:0 0 2px 0 ; margin:0; color:#666;}
.Form p small strong { font-weight:bold; color:#FF3300;}
.Form p small { font-size:11px; display:block; padding:6px 0 ; color:#000;}
.Form .TextField { color:#003366; background:#e9f8ff; border:solid 1px #d5e7f0; padding:6px 6px 6px 30px; font-size:12px; display:block;}
.Form .TextArea { color:#003366; background:#e9f8ff; border:solid 1px #d5e7f0; padding:6px; font-size:12px;}
/* Side Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SR { width:394px; padding:20px 20px 20px 0; margin:0; float:right;}
/* Banners ADs ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.banner {padding:10px; margin:0; border:1px solid #ededed; background:#f6f6f6;}
.banner h2 { text-transform:uppercase; text-decoration:underline; border-bottom: 1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 20px;}
.banner ul { margin:0; padding:0 0 0 10px; list-style:none;}
.banner li { margin:0; padding:5px 10px; float:left;}
.banner li img { }
/* Side Right Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SRR {padding:0; margin:10px 0;}
.SRR div.categories, .SRR div.archives, .SRR div.meta { width:50%; float:left; margin:0; padding:0;}
.SRR h2 { text-transform:uppercase; text-decoration:underline; border-bottom: 1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 20px;}
.SRR ul { padding:5px 15px; margin:0; list-style:none;}
.SRR li {padding: 5px 0 5px 20px; font:normal 12px Georgia, "Times New Roman", Times, serif; color: #b4b4b4; border-bottom:1px solid #ededed; background:url(images/categories_li.gif) left no-repeat;}
.SRR a { font:normal 12px Georgia, "Times New Roman", Times, serif; color: #b4b4b4; text-transform:uppercase;}
.SRR a:hover { text-decoration:underline; color:#10547e;}
/* Flickrrss ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.widget { padding:10px; margin:10px 0; border:1px solid #ededed; background:#f6f6f6;}
.widget h2 { text-transform:uppercase; text-decoration:underline; border-bottom:1px solid #ccc; color:#6b6b6b; font:bold 12px Arial, Helvetica, sans-serif; margin:10px; padding:5px 10px;}
.widget ul { padding:10px; margin:0;}
.widget li { margin:0; padding:5px 10px 4px 20px; list-style-type:none; border-bottom:1px solid #ededed; color:#999999; background:url(images/categories_li.gif) left no-repeat;}
.widget li a { margin:0; padding:0; border:0; background:none; color:#10547e; text-decoration:underline;}
.widget li a:hover { text-decoration:none;}
/* Flickrrss ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.widget_flickr { border:0; background:none;}
.widget_flickr h2 { }
.widget_flickr ul { margin:0; padding:0 0 10px 5px; text-align:center;}
.widget_flickr li { margin:0; padding:0 5px 0 0; list-style-type:none; display:inline; background:none;}
.widget_flickr li a img { background:#000; padding:0; margin:0 5px 5px 0; width:65px;}
.widget_flickr li a:hover img { padding:0;}
/* Footer ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.FBG { margin:0; padding:0; }
.Footer { padding:10px 0; margin:0; text-align:center; background:none;}
.Footer p { color:#56b1d5; padding:0; margin:0; font:normal 11px Arial, Helvetica, sans-serif;}
.Footer a { color:#56b1d5; text-decoration:underline;}
I've got an odd bug in IE7 that's got me completely stumped. I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it. My main page works just fine. Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container. The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on. I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated. eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something. I read through many of the related articles I found through searching the board, but found no solution to my problem. First question: Do these two CC's, when either is present in the head section, represent two ways of accessing my styles_IE.css file? Code:
<!--[if lte IE 8]>
<style type="text/css" media="all"> @import "css/styles_IE.css"; </style>
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/styles_IE.css" type="text/css" media="screen" />
<![endif]-->
Second: An associate of mine complains that, since I took our new site live a week ago and migrated from my development site, his IE8 no longer makes the drop-down menus drop down. I built a first site a couple years ago using this same Suckerfish, which I found online after someone here recommended it. For my new project I just copied the Suckerfish and CSS and changed the target files and color scheme. Works like a champ. Both my new live and development sites work fine with *my* IE8 (and FF, Opera, Chrome, Safari...), and no one else has told me of any issues. But this guy can no longer navigate our site due to drop-down problems (but he tells me he had no problem with the dev server...weird). Below is a look at my Suckerfish menus and CSS. Thank you very much for any input regarding IE and how I might solve one of its countless and inexcusable foibles... Curtis Code:
<div id="navContainer">
<ul id="nav">
<li><a href="index.php">Home</a>
<ul>
<li><a href="index.php">Home Page</a></li>
<li><a href="about.php">About DT</a></li>
<li><a href="dthc.php">DTHC Board</a></li>
<li><a href="found.php">DT Foundation</a></li>
<li><a href="email.php?email=gen">Contact Us</a></li>
</ul>
</li>
<li><a href="">Events</a>
<ul>
<li><a href="commu.php">Community Service</a></li>
<li><a href="workday.php">Retreats/Workdays</a></li>
<li><a href="history.php">House History</a></li>
</ul>
</li>
<li><a href="">Alumni</a>
<ul>
<li><a href="email.php?email=addrChng">New Contact Info?</a></li>
<li><a href="dues.php">Dues/Donations</a></li>
<li><a href="pclass.php">Pledge Classes</a></li>
<li><a href="missing.php">The Missing</a></li>
<li><a href="memorial.php">Memorial</a></li>
</ul>
</li>
<li><a href="">Up & Down</a>
<ul>
<li><a href="minutes.php">Newsletters / Minutes</a></li>
<li><a href="manuals.php">Manuals and Docs</a></li>
<li><a href="upTheRiver.php">Upload Center</a></li>
<li><a href="vision.php?view=visi">Our Vision</a></li>
</ul>
</li>
<li><a href="">Grab Bag</a>
<ul>
<li><a href="common.php?page=dtBusi">DT Businesses</a></li>
<li><a href="gallery.php">Scrap Book</a></li>
<li><a href="direc.php">Online Directory</a></li>
<li><a href="mailList.php?page=main">DT Mail List</a></li>
<li><a href="lilsis.php">Little Sisters</a></li>
</ul>
</li>
</ul><!-- end ul #nav -->
</div><!-- end navContainer -->
Code:
#navContainer {
z-index:3; width:100%; text-align:left;
border:0px solid #ddd; margin:0 auto; padding-bottom:1.3em
}
#nav, #nav ul {
font-size:1.0em; float:left; width:665px;
list-style:none; line-height:1; background:#bfe2f9;
font-weight:bold; padding:0; border:solid #999; border-
width:0 0 1px 0; margin:0 0 0 0
}
#nav ul{background:#bfe2f9;}
#nav {padding-left:6em}
#nav a {
display:block; width:10em; w\idth:6em;
color:#db2438; text-decoration:none; padding:0.25em 0.4em
}
#nav a.topDrop {
background:url(../pics/rightArrowYellow.gif)
center right no-repeat;
}
#nav li {float:left; padding:0; width:8.5em}
#nav li ul {
position:absolute; left:-999em; height:auto;
width:9.8em; w\idth:9.2em; font-weight:normal; border-
width:0.1em; margin:0; z-index:1000
}
#nav li li {padding-right:0.9em; width:7.5em}
#nav li ul a {width:13em; w\idth:9em}
#nav li ul a:hover {
width:13em; w\idth:9em; color:blue;
text-decoration:underline
}
#nav li ul ul {margin:-1.75em 0 0 10.4em}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
left:-999em
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto
}
#nav li:hover, #nav li.sfhover {background:#bfe2f9}
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? Hi, I am looking to align the links in the top right hand corner of my blog fully to the right but at the moment they are moved to the left slightly can anyone help with this? www dot gadgetwire dot co dot uk Thanks 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. I'd appreciate any help with this, thanks in advance. So, I purchased a Wordpress template, installed it, works fine. In some of the posts I'm creating for the site, I want to include simple tables.... problem is, somewhere, somehow, the CSS file for the template I purchased is setting certain style rules for the tables I create. Including a background image. So, it's messing up my tables. I tried setting new table rules this basic way: .argh td { my styles here } then for my tables in my posts: <table class="argh"> It seems to be taking the text formatting that I included that way ... but the dang background image from some style somewhere else keeps showing up no matter what I do. :| Any help would be much appreciated. Hello guys, I have beginner CSS experience. I am using a free wordpress theme. I have begun to modify the theme and have run into a problem. I have checked all over the web for resources to resolve this issue to no avail. I have used the CSS Validator and received some errors nothing that affects this. ISSUE: When clicking "Read More" the image appears twice, once as the limited size and once as the full size. I would like only the first image to appear not the full size one too. SITE: havenhart[dot] com Any help would be super. I am trying to edit the style sheet in twenty eleven in WP to get the menu to do something specific. I am at the very beginning so there is no content, and the actual style isn't even set - I'm just trying to get my head around things. The site is <a href="http://middevontyres.co.uk/test/">here</a>. Ok at the moment on the active page, the menu has the image with the black and white checking on it - this I was able to work out pretty easily and the styling is: <code>#access .current_page_item > a { background-image: url(images/active2.png); background-repeat: no-repeat; font-weight: bold; color: #FF0000; }</code> The problem I have, is in the sub-menu I want the active page to be an image with only 1 column of checks, (active3.png). The existing style sheet uses the above current page item right down the menu. I tried to create a new section: <code>#access .current_page_item > ul a { background-image: url(images/active3.png); background-repeat: no-repeat; font-weight: bold; color: #CC33CC; }</code> (The colours are irrelevant it is just my way of tracking which code applies where. Anyway this style isn't being picked up. I suspect I'm not understanding the structure properly. Your advice would be appreciated. I dunno if this is the right spot but I am stuck. Here is my issue http://fifafanatics.com/league/index.php?option=com_joomleague&func=showRanking&p=1 is my site. as you can see the theme the content in the right is too close to the left. I want to "center". If you click on the forum you will see the real issue. I need that forum to stretch out. I feel like these are stuck in a container but I don't even know where to look. Let me post some code. this is the .css file. theres a html file as well if needed I can post that. Code: body {
overflow-x : hidden;
overflow: -moz-scrollbars-vertical;
}
.body {
color: #000000;
margin: 0 0 0 0;
padding: 0px;
font-size: 11px;
font-family: "Trebuchet MS";
background: #575757;
}
.all {
width:970px;
margin:0 auto;
padding:0;
background: url(../images/bg_page.gif) repeat-y;
}
#logo {
background: transparent url(../images/bg.jpg) no-repeat top center;
margin:0 auto;
width: 100%;
padding:0;
height:119px;
text-align:left;
vertical-align:middle;
}
#logo a {
margin:20px 0 0 75px;
line-height:80px;
font-family:"Trebuchet MS";
font-size:23px;
color:#FFFFFF;
}
.topmaincol {
width:100%;
height:30px;
}
/* --- nav --- */
.div {
}
#menu{
position:relative;
height:58px;
color:#E0E0E0;
background: url(../images/topmenu_bg.jpg) repeat-x;
width:966px;
font-size:13px;
}
#menu .menuc {
margin: 0px auto;
width: 966px;
font-family:"Trebuchet MS";
}
#topnavi{
position:relative;
height:58px;
font-size:12px;
font-weight: normal;
font-family:"Trebuchet MS";
background: url(../images/topmenu_bg.jpg) repeat-x top left;
padding:0 0 0 5px;
}
#topnavi ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
#topnavi ul li{
display:block;
float:left;
margin:0 1px;
}
#topnavi ul li a{
display:block;
float:left;
color: #FFFFFF;
text-decoration:none;
padding:0 0 0 11px;
height:52px;
}
#topnavi ul li a span{
font-size:12px;
padding:17px 11px 0 0;
height:52px;
float:left;
}
#topnavi ul li a:hover{
font-size:12px;
color: #000000;
}
#topnavi ul li a:hover span{
font-size:12px;
display:block;
width:auto;
cursor:pointer;
}
#topnavi ul li a.current,#topnavi ul li a.current:hover{
color: #FFFFFF;
background: url(../images/topmenu_left.jpg) no-repeat top left;
line-height:350%;
}
#topnavi ul li a.current span{
display:block;
padding:0 10px 0 0;
width:auto;
background: url(../images/topmenu_right.jpg) no-repeat top right;
height:52px;
}
/* --- end nav --- */
/* /////////////////////////////////////////////////////////////////////////// */
form {display:inline;}
hr {
color : #999999;
height : 1px;
width : 100%;
}
.back_button {
color : #999999;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
font-weight : normal;
padding-bottom : 3px;
margin-right : 4px;
float : right;
line-height : 20px;
}
.button {
font-size : 11px;
color : #333333;
border : 1px solid #999999;
margin : 3px;
background-color : #EDEDED;
padding : 1px;
cursor : pointer;
}
.inputbox {
color : #000000;
background : #ffffff;
border : 1px solid #cccccc;
margin : 3px;
}
table,td,div {
color : #000000;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
margin:0;
}
p {
color : #000000;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
padding:4px 0px 4px 0px;
margin:0;
}
strong {
color : #000000;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
padding:4px 0px 4px 0px;
margin:0;
}
i {
color : #000000;
font-family : Verdana, Helvetica, sans-serif;
font-size : 10px;
line-height : 16px;
padding:4px 0px 4px 0px;
margin:0;
font-style: normal;
}
em {
color : #000000;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
line-height : 16px;
padding:4px 0px 4px 0px;
margin:0;
font-style: normal;
}
/* /////////////////////////////////////////////////////////////////////////// */
.leftcol {width:200px;padding:10px 5px 10px 10px;}
.maincol {width:525px;padding:10px 5px 10px 5px;}
.rightcol {width:200px;padding:10px 10px 10px 10px;}
.pollstableborder td{ text-align:left}
#container {
width:970px;
height:100%;
margin: 0px auto;
padding:0;
text-align: left;
}
/* -------------------------------------------------------------------------------------------------------------- */
table.moduletable {
margin : 0 0 20px 0;
width : 100%;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 10px;
}
table.moduletable th {
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
text-align : left;
height : 34px;
color : #FFFFFF;
padding : 8px 0 0 13px;
text-indent : 10px;
line-height : 15px;
background : #fff url(../images/moduletable_th_bg.jpg) no-repeat left top;
}
table.moduletable td {
padding-top: 2px;
}
table.moduletable td table{
width : 100%;
}
.sectiontableheader {
font-size : 10px;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-weight : normal;
text-transform : uppercase;
letter-spacing : 1px;
color : #333333;
background : #ffffff;
padding : 1px;
}
.sectiontableentry1 {
vertical-align : top;
padding : 3px;
background : #D9D9D9;
border-bottom : 1px solid #ffffff;
line-height : 25px;
}
.sectiontableentry2 {
vertical-align : top;
padding : 3px;
border-bottom : 1px solid #ffffff;
background : #EEEEEE;
line-height : 25px;
}
a.mainlevel {
display : block;
width : auto;
margin : 1px 0;
padding : 0;
font-size : 12px;
background : none;
text-indent : 10px;
width : 200px;
}
a.mainlevel:link, a.mainlevel:visited {
display : block;
font-size : 11px;
background : transparent url(../images/mainlevel.gif) repeat-x right bottom;
font-weight : normal;
padding : 4px 0 4px 0;
color : #000000;
text-indent : 11px;
}
a.mainlevel:hover {
background : transparent url(../images/mainlevel_h.gif) repeat-x right bottom;
font-size : 11px;
font-weight : normal;
color : #D01C0D;
text-decoration : none;
text-indent : 11px;
}
#active_menu {
color : #D01C0D;
background : transparent url(../images/mainlevel_h.gif) repeat-x right bottom;
}
a#active_menu:hover {
color : #333333;
}
a:link, a:visited {
font-size : 11px;
color : #333333;
text-decoration : none;
font-weight : bold;
}
a:hover {
font-size : 11px;
color : #D01C0D;
text-decoration : none;
font-weight : bold;
}
a.category:link, a.category:visited {
font-size : 11px;
font-weight : bold;
}
a.readon:link, a.readon:visited {
color : #999999;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
background : url(../images/readon.gif) no-repeat;
white-space : normal;
font-weight : bold;
padding : 1px 0 3px 18px;
float : right;
line-height : 10px;
text-decoration : underline;
}
a.readon:hover {
color : #D01C0D;
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
background : url(../images/readon.gif) no-repeat;
white-space : normal;
font-weight : bold;
padding : 1px 0 3px 18px;
line-height : 10px;
text-decoration : underline;
}
ul {
margin : 2px;
padding-left : 10px;
list-style : none;
}
li {
line-height : 15px;
padding-left : 10px;
padding-top : 0;
}
table.contenttoc {
border : 1px solid #dcdcdc;
background : #F1F1F1;
padding : 5px;
margin-left : 2px;
margin-bottom : 2px;
}
.pagenavcounter {
font-size : 10px;
color : #4da338;
}
.pagenavbar {
border-top : 1px solid #999999;
padding : 2px;
}
.pagenav {
font-weight : bold;
}
a.pagenav:link, a.pagenav:visited {
font-size : 11px;
color : #999999;
text-decoration : none;
}
a.pagenav:hover {
font-size : 11px;
color : #3333ff;
text-decoration : none;
}
.date {
font-size : 10px;
font-weight : bold;
color : #707070;
padding-right : 12px;
}
.small {
font-size : 10px;
color : #333333;
}
.smalldark {
font-size : 10px;
color : #333333;
}
.createdate, .modifydate {
float : right;
font-size : 10px;
color : #666666;
font-weight : bold;
}
.content_vote {
font-size : 10px;
height : 22px;
padding-top : 2px;
padding-bottom : 2px;
}
.content_rating {
font-size : 10px;
color : #999999;
}
.pway {
margin:0 auto;
text-align:left;
width:970px;
height:18px;
padding:5px 0 0 0 ;
background:#575757;
}
.pathway {
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
font-size : 11px;
color : #D01C0D;
padding-left : 12px;
}
a.pathway:link, a.pathway:visited {
font-family :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
color : #FFFFFF;
font-size : 11px;
padding-left : 0;
}
a.pathway:hover {
color:#efefef;
font-size : 11px;
padding-left : 0;
}
table.content{
width : 100%;
padding : 0;
border-collapse : collapse;
border-spacing : 0;
margin-bottom : 10px;
}
table.contentpane {
width : 100%;
border-spacing : 0;
padding-left : 5px;
padding-right : 5px;
margin-bottom : 5px;
}
table.contentpaneopen {
width : 100%;
border-spacing : 0;
padding-left : 5px;
padding-right : 5px;
margin-bottom : 5px;
}
.poll {
color : #333333;
line-height : 12px;
font-weight: normal;
}
.pollstableborder{
border-color : #999999;
}
.contentheading,.componentheading {
width : 90%;
font-size : 12px;
font-weight : bold;
line-height : 16px;
text-transform : uppercase;
text-align : left;
text-indent : 0;
color : #D01C0D;
padding : 1px;
margin : 3px 0px;
}
.ontab {
border-left : 1px solid #666666;
text-align : center;
font-weight : bold;
color : #333333;
padding : 5px;
cursor : pointer;
line-height : 30px;
}
.offtab {
border-left : 1px solid #666666;
text-align : center;
color : #999999;
font-weight : normal;
padding : 5px;
cursor : pointer;
line-height : 30px;
}
.tabpadding {
border-left : 1px solid #666666;
}
.col {
vertical-align : top;
background : #ffffff;
padding-top: 5px;
}
.contentdescription {
width : auto !important;
margin : 0;
padding : 0;
padding-top : 5px;
text-align : left;
}
td.top1{
margin: 0;
padding: 0;
height: 28px !important;
height: 28px;
padding-top: 2px !important;
padding-top: 3px;
background : url(../images/shadow.jpg) #f1f1f1 repeat-x top;
}
table.top2{
background : #ffffff;
}
.searchbox {
margin : 0;
padding : 0;
margin-top : 13px;
margin-left : 10px;
width : 130px;
font-size : 11px;
color : #707070;
border : 1px solid #cccccc;
padding : 2px !important;
padding : 1px;
background : none;
}
.sublevel {
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #999999;
margin-top : 10px;
}
a.sublevel:link, a.sublevel:visited {
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #999999;
padding : 5px 1px 3px 5px;
text-decoration : none;
}
a.sublevel:hover {
color : #D01C0D;
text-decoration : none;
}
a.sublevel#active_menu {
background : transparent;
color : #ff6600;
border : 0;
}
a.toclink:link, a.toclink:visited {
font-family :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : normal;
color : #999999;
padding : 5px 1px 3px 5px;
text-decoration : none;
}
a.toclink:hover {
color : #D01C0D;
text-decoration : none;
}
td.logoheader {
margin: 0;
padding: 0;
background : url(../images/header.jpg) no-repeat bottom;
height : 65px;
width : 770px;
}
td.topnav {
margin : 0px;
padding: 0px;
background : url(../images/bg_top.jpg) repeat-x top left;
height : 42px;
width : 770px;
}
td.bgline {
margin : 0;
padding: 0;
background : url(../images/s.gif) repeat-y;
width : 7px;
}
#mainlevel-nav {
font-size : 11px;
list-style : none;
padding : 0;
margin : 0;
margin-left : 1px;
}
#mainlevel-nav li {
float : right;
display : block;
list-style : none;
background-image : none;
padding-left : 2px;
padding-right : 2px;
margin : 0;
width : auto !important;
font-size : 11px;
line-height : 28px;
white-space : nowrap;
border-left : 1px solid #cccccc;
}
#mainlevel-nav li a {
padding-left : 10px;
padding-right : 10px;
font-size : 11px;
color : #000033;
text-decoration : none;
}
#mainlevel-nav li a:hover {
font-size : 11px;
color : #999999;
}
.blog_more {
margin : 10px 0 7px 7px;
}
.buttonheading {
padding : 0 2px;
}
.mosimage {
border : 1px solid #dedede;
margin : 5px;
padding-top: 3px;
background:#FFFFFF;
}
.mosimage_caption {
margin-top: 3px;
padding : 2px;
color : #000066;
font-size : 10px;
background: #f1f1f1;
}
/* -------------------------- */
.footer_bg {
width:970px;
background:#575757 url(../images/footer_bg.jpg) no-repeat left top;
color:#FFFFFF;
padding:6px 0px 0 0;
height:43px;
text-align: center;
margin:0px;
}
.footer {
color:#fff;
padding:0;
margin:0 0 10px 0;
}
.footer div, .footer div a, .footer div a:visited{
color:#fff;
}
I want to redo my tumblr blog but it requires css and i kinda suck at CSS. I was reading something on the net about it but after awhile, all the information started to get kind of hazy. If you guys could just tell me where i need to start off and what i need to do, i would greatly appreciate it. Thanks hi I have a page which has the top menu section fixed (using CSS), and the remainder of the page can be scrolled ... i.e. there are no frames. However the code below works well in firefox, but not IE. Could anyone please help make the code the work in IE (and all other major browsers). cheers nathan here's the code: Code: <style type="text/css" media="screen">
html, body
{
margin: 0;
padding: 0;
height:100%;
max-height:100%;
font-size: 90%;
font-family: verdana, sans-serif, arial, helvetica;
background-image: url('gradient.jpg');
background-repeat: repeat-x;
background-color:#fff;
}
#header
{ position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
z-index: 1;
height: 50px;
margin-bottom: 2em;
background-image: url('gradient2.jpg');
background-repeat: repeat-x;
}
#topmenu
{
position: absolute;
left: 250px;
top: 30px;
width:505px;
}
#stats
{
position: absolute;
right: 15px;
top: 5px;
text-align: center;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col1
{
float: left;
width: 45%;
margin-bottom: 1em;
border-right: 1px solid #ccc;
padding-right: 3%;
margin-top: 5.5em;
}
#col2
{
float: left;
width: 15%;
margin-left: 3%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#col3
{
position: absolute;
right: 30px;
margin-left: 3%;
margin-bottom: 1em;
margin-top: 5.5em;
}
#footer
{
clear: both;
height: 50px;
padding: .5em;
font-size: 11px;
}
#footer ul {
border-top: 1px solid #ccc;
margin: 0;
padding: 1em 0 0 0;
list-style: none;
}
#footer li a, #footer li span {
display: block;
float: left;
padding: 5px 1em;
border-right: 1px solid #ccc;
}
#footer li span.copyright {
border-right: none;
}
a:hover {
color: #003;
}
h1
{
margin: 0;
padding: .5em;
}
h2 { margin-top: 0; }
<!--[if IE 6]>
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
<![endif]-->
</style>
There is a problem with What's New section's appearance (right bottom). I want it appear just like here http://aslanyurek.com/atolye/index.asp but instead, it appears as. http://www.refinethetaste.com/html/ Style I created for the whole right block. PHP Code: /*right block*/ #rblock .notice { width:375px; height:30px; font-size:13px; line-height:30px; color:#f3f2f1; background:#5f5548 url(../images/isaret_2.gif) no-repeat 1% 55%; text-indent:15px; } #rblock .search { width:325px; margin-top:1px; background:#9e0b0e url(../images/icon_arama.gif) 3% 50% no-repeat; padding:5px 5px 5px 45px;} #rblock .search span { color: #FFFFFF; font-size:9px;} #rblock .news { width:375px; border-bottom:1px dotted #CCCCCC;} #rblock h1 { font-size: 14px; color:#716759; background:#ece7d1; text-indent:15px; line-height:25px;} #rblock .news h2 { font-size: 12px; color:#534741;} #rblock .news p { font-size: 10px;} #rblock img#news{ float:left; margin:10px; height: 60px; width: 66px; border:1px solid #b39f87; padding:1px; background:url(../images/load.gif) center no-repeat; } #rblock .clear { clear:both; height:1px; width:1px; overflow:hidden; } |
|||||||