|
CSS - Forum Topic Problem
Hello! First post here.
I'm having a little problem with the my forums and I can't find the problem in the CSS. I was wondering if anyone here had some tips or a solution; It seems longer topic titles seem to effect how squished up the posters posts are; they get squished and pushed up to the right. I'm out of ideas and need some help. If you check any of the other posts on the forum with smaller titles, you'll notice that the posts are fine. It is definately something to do with large topic titles.. Any help would be appreciated. Similar TutorialsWith all the hype these days about finally meeting CSS specs and designing without tables, I think this topic needs more focus. What do you think? Hello all - I am trying to implement tabs to my forum, I currently have some on there but I like the looks better of the new ones that I am trying to get going. I find that when I get them working (using additional CSS as well as navbar/header edit) it will not work in all browsers. If I post the CSS as well as the navbar/header code would you be able to help me track down my issue? EDIT - I was going to post screenshots but was not permitted I would like to post on another forum with CSS. Is there any way to do this? I already have the content laid out with css in my html editor and just wanna transfer it to a forum as a forum post. I suspect forums don't allow css so just wondering if there's a way around this. Appreciate the help, JH Hi, my CMS is bridged with a forum and the body background color from the CMS is overriding the forum css. I have similar issues with the p and td tags and perhaps more small stuff. How can I resolve the conflicts so I can set the forum styles independent of my Mambo template? Here is an example (body color issue) CMS code: Code: body {
margin: 10px 0px 10px 0px;
padding: 0;
font: 101.5%/1.4em "Trebuchet MS", Tahoma, Verdana, Helvetica;
letter-spacing: normal;
background: #232323 url(../images/body_bg.png) repeat-x center top;
color: #999;}
Forum code: Code: body {
font: 90%/85% Verdana, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 12px 0 4px 0;
}
CSS Forum Posting Guidelines Some very important things to keep in mind before you post your question: Note that if it appears you haven't read this, we're most likely just going to point you to it. BEFORE YOU POST Before you post your question, make sure your X/HTML and css validates! Visit w3.org to validate your X/HTML and css, if you don't, that's the first thing we are going to ask you to do. Invalid X/HTML and/or css gets unpredictable results. X/HTML Validator CSS Validator Here is a sample template you can use to make sure your test code is fully functional: 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>
<!--Don't add anything above this line, you may change the DTD to match your page-->
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<!--Uncomment the following line and remove the embedded style sheet if your style is external-->
<!--<link rel="stylesheet" href="includes/style.css" type="text/css" />-->
<style type="text/css">
/*add your styles here, or remove this section if your styles are external*/
body{
background-color:#ffffff;
}
</style>
</head>
<body>
<!--Put your x/html code here-->
</body>
</html>
USE YOUR RESOURCES As with all forums, there's a pretty good chance your question has already been answered... but css being what it is, you may not know exactly what you are looking for. Have a look at the resources sticky, or try searching for your problem. BE DESCRIPTIVE Spell it out for us. What do you think it should look like, what does it look like now, what is it not doing "right"... It's amazing (I'm guilty too) how many people post a "Have a look at this, how do I fix it?", but they don't tell us what it's supposed to look like. PROVIDE EXAMPLES Give us a link, or paste your code... we can't read minds, especially through the net. If you are providing a link to your page, make it an actual link using the bbcode tags, rather than just pasting the URL. If your css isn't embedded or inline, provide a link to it too, or paste it if it's not too big. USE A DESCRIPTIVE TOPIC NAME Topics which are simply... CSS Problem Please Help IE not working! Won't get many responses, try and come up with something a little more descriptive... Getting rid of space around floated divs in IE My footer won't stay at the bottom By the way, these are examples of problems that can be searched for... ALL PROBLEMS, BIG and SMALL Remember that the C in CSS stands for cascading, upper level elements have an effect on the lower level elements... If you have a large css sheet and a lot of code on your site, and one thing isn't working the way it should, chances are something else is interfering... try simplifying your code and see if it will work that way... An old debugging technique is to break it down into smaller portions in order to isolate the problem... Mod edit: Stickied, locked and posts removed. If anyone has anything they'd like to add to this guide, please feel free to PM me and I'll add it if needed. Thanks, Jon. I have a layout that has text in a left div and the form input in the right. I want the form input to be 100% width of DIV.standard_field_right not 100% width of the entire page. Can someone give me a hint please. CSS and XHTML below: PHP Code: DIV.standard_field_container { width: 98%; padding: 0.4em; border: 1px solid #8B8B8B; background-color: #E2E2E2; overflow: hidden; } DIV.standard_field_left { width: 10em; float: left; margin-right: 5em; font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; } DIV.standard_field_right { font: normal 0.8em Verdana, Arial, Helvetica, sans-serif; } SPAN.standard_field_type_info { font-weight: normal; color: #ff0000; border-bottom: 1px dashed #ff0000; cursor: help; } INPUT.input_text_field { width: 30em; } XHTML: PHP Code: <div class="standard_field_container"> <div class="standard_field_left"> <span class="standard_field_name"><?php echo $field_definition[1]; ?></span> <span class="standard_field_type_info" title="<?php echo $field_definition[7]; ?>">Information</span> </div> <div class="standard_field_right"> <span class="standard_field_input_area"><input name="<?php echo $field_definition[0]; ?>" type="text" id="<?php echo $field_definition[0]; ?>" maxlength="<?php echo $field_definition[10]; ?>"<?php if ($value_applies == '1') { ?> value="<?php echo $row["$field_definition[0]"]; ?>" <?php } ?> class="input_text_field" /></span> </div> </div> What is your go-to forum for web design (HTML, CSS, JScript, PHP)? I hate to be so spread out across a ton of forums around the same topic, but have yet to find a forum that seems to be very active. Which do you think have huge active communities of knowledgeable designers/developers? Here is my code Code:
<html>
<head>
<style>
div.menu
{
border: 1px solid #F3F3F3;
padding: 5px;
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="menu">
<table style="width:100%">
<tr>
<td>Test</td>
</tr>
</table>
</div>
</body>
</html>
What i am trying to do is set the division to align in the center of the screen. At the moment it is aligning on the left hand side. Why is this code not working? 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. Hey, I think i just need someone else to look at this for me. I've been coding all day and would probably be able to figure this out if I just went to bed and did it tomorrow. If you roll over an image that's alson an anchor at www.deeperdevotion.com/wp, you'll find that it places a background-color or underline or both on it. The thing is, I can't find the code in my CSS that's causing me the trouble. my css is located at www.deeperdevotion.com/wp/wp-content/themes/dd/styles/101106.css Thanks. Hello everyone, I am hoping I could get some help on this. I'm the new Marketing guy at this company. One of my duties is to fix an issue with our website which was built by the last guy to sit in this chair. I may not know how to build a proper webpage, but this guy knew exactly how not to do it and ran with just that. So, the issue lies within this example page: tinyurl.com/rediculouswebsite The footer ends up under-lapping the table when viewed in IE (when not in compatibility mode) and Firefox. I know this is a ridiculously constructed site, I just need to fix this one problem and be done with web development forever. High fives and scotch from my boss very well may ensue. Thank you all very much. Hello. I am new at css and web design so if these are easy problems please excuse. First of all, the website url http://www.onlinecasinoboss.com In Firefox, the unordered lists <ul> in the left column do not display correctly. The left margin is way too big. I'm not sure why, please look at the page in IE to see what I want it to look like. And in Internet Explorer, the spacing between my top image, header bar, and main page is screwy. There should be no space between the header image and header bar (the flags are in this area). Also there should only be 2px spacing between the header and the main page, however it appears there is atleast 24px there. Again please refer to the page in FF to see what I want it to look like. I like css, and have decided to pursue my first design in css based off of the many professional designers reconmendations and reviews. But I must say it is a major headache to deal with cross-browser/platform display problems. And what professional designer wants to rely on 'css-hacks' when producing a product for a major vender. Just beginner bitching. Thanks for the help! After hours of pain in my head and probing to get my leftmenu 100% height of my contentbox... I need some help i think... http://www.ipan.be/dev (the bad result with leftmenu not 100%) http://www.ipan.be/dev/styles/ipan.css http://www.ipan.be/dev/styles/ipan_news.css any solution to get the thing that is making me crazy working? I know that IE6 has floating issues, just I was wondering if there was a way around this problem. Everytime I make a 2 column page they dont line up correctly in IE6. http://monarkstudios.ca/contact/ On IE7 or Firefox they work great. I was having a problem with IE7, and I adjusted the widths and it fixed it for that. Any solution or way around it? Thanks. I have created this style .class1 A:link {text-decoration: none;color:white;} .class1 A:hover {text-decoration: underline; color:Orange;font-weight:bold} .class1 A:visited {text-decoration: none;color:white;} .class1 A:active {text-decoration: none;color:white;} In the aspx page but the problem is that when the user visit some link and try to put the mouse again on that link color is not changing but yea it is making bold font. What can be the problem or something I am missing ?? I am sorry, I can't show the page as an example as it is a clients website. Basically the problem is the box model (I think). In IE the background file loads fine, but in FF it doesn't. It is a box inside a box, inside a box. I have tried body #divname html # divname html > divname and all other selector variants I can think of to no avail. I was wondering if this is a known problem. I thought it might be z-indexing but div's inside the affected div are picking up their background images. I have two pages that are giving me problems, only in IE of course. On the first, http://www.jaypaulstudio.com/galler...ure/summer.html or even http://www.jaypaulstudio.com/galler...eachdancer.html I think the difference in margins causes the problem, but the scroll bar extends outside of the bounds of the page (the blue part). The second, http://www.jaypaulstudio.com/galler...ture/budda.html is different; I cannot make the page contents left align without breaking everything else in the content. My style sheet is he http://www.jaypaulstudio.com/main.css Any solutions or suggestions would be much appreciated. Even a good site on how to hack css for IE... Sarah Hi, i have a problem with a layout of a website in IE7 when i open the website first the layout is broken, when i resize the window the layout is how it should be, anyone come accross this before? I got the bellow css that I am using to display a drop down menu on my page. On firefox the drop down menu width looks ok , all the menu options looks the same. But in IE the drop down menu width is showing different. Is displaying the menu options broken as the size of the text. The bellow lines are a representaion of how the menu in IE is showing. In Firefox all the lines are display the same. How can I make it look the same in IE as in Firefox? Drop down menu options --------------------option 1 --------------------------------option 2 --------option 3 ------------------------------------------------option 4 #menuh-container { position: absolute; top: 8.2em; left: 21.7em; width:auto; } #menuh { font-size: 12px; font-family: arial, helvetica, sans-serif; width:auto; float:left; margin:2em; margin-top: 0em; width:auto; } #menuh a { text-align: left; display:block; border: 1px solid #555; white-space:nowrap; margin:0; padding: 0.3em; width:auto; } /* menu at rest */ #menuh a:link, #menuh a:visited, #menuh a:active { color: white; background-color:#3399CC; text-decoration:none; } /* menu on mouse-over */ #menuh a:hover { color: white; background-color: #8FD400; text-decoration:none; width:auto; } /* attaches down-arrow to all top-parents */ #menuh a.top_parent, #menuh a.top_parent:hover { background-image: url(navdown_white.gif); background-position: right center; background-repeat: no-repeat; } /* attaches side-arrow to all parents */ #menuh a.parent, #menuh a.parent:hover { background-image: url(nav_white.gif); background-position: right center; background-repeat: no-repeat; } #menuh ul { list-style:none; margin:0; padding:0; float:left; width:auto; /* width of all menu boxes */ /* NOTE: For adjustable menu boxes you can comment out the above width rule. However, you will have to add padding in the "#menh a" rule so that the menu boxes will have space on either side of the text -- try it */ } #menuh li { position:relative; min-height: 0px; vertical-align: top; width:auto; } #menuh ul ul { position:absolute; z-index:500; top:46px; display:none; padding: 1em; margin:-1em 0 0 -1em; width:auto; } #menuh ul ul ul { top:0; left:100%; } div#menuh li:hover { cursorointer; z-index:100; } div#menuh li:hover ul ul, div#menuh li li:hover ul ul, div#menuh li li li:hover ul ul, div#menuh li li li li:hover ul ul {display:block;} div#menuh li:hover ul, div#menuh li li:hover ul, div#menuh li li li:hover ul, div#menuh li li li li:hover ul {display:block;} /* End CSS Drop Down Menu */ |
|||||||