|
CSS - Urgh, I'm Giving Up Trying To Solve This. Help Plz.
EDIT
Never mind, fixed it myself eventually. Similar TutorialsHi, I've done a lot of searching about the 3px bug yet nothing seems to solve the following simple layout. I have the Holly Hack added but still makes no difference, in IE6 I still get a gap to the right of the floated div. Am I missing something? Thanks, Roger #nav { float: left; width: 200px; background: red; height: 1%; } #main { width: 200px; height: 200px; margin-left: 200px; background: #ccc; } <body> <div id="nav"> <p>left nav</p> </div> <div id="main"> </div> </body> i think there is a problem with margin: 0 auto; for ie6. Can you try these code in your IE? I know it's a bug but i couldn't find the solution. Code: <div style="width:250px; background-color: #DFDFDF; margin: 10px auto; text-align:center; padding: 4px;">hello world</div> do you have an idea? thanks. www.ahmetalpbalkan.com Forget it, I solved the issue. How does one delete a post like this... Hi there, First of all, i posted this in the HTML section as well, but after some consideration i think it is a CSS needy question. However i can not remove my own post from the HTML section? Problem explained: I would like to give a maximum width to a text in a <pre> </pre> tag. Now by giving it a standard width or a width via a cascading style sheet class does not work. I also tried wrapping it in a table and / or a div with the width attribute. Anyone got an idea how to solve this? Regards, Sander Meilink By the way, pre does what it is supposed to do, it remembers the linebreaks a.o. very well. Example of all things tried combined: Code:
<table cellspacing="2" cellpadding="2" border="0" width="20">
<tr>
<td width="20"><div style="width: 20px;"><pre style="width: 20px;">asd fasod khgfas kjdgfkjasg dfkjhsagd fjgas sadkjfg dsafkjhg sdfkhg jhg jkhgdsfjkhg jkhgsdfa</pre></div></td>
</tr>
</table>
I need help with my navigation menu... The problem is that I want the div container to be gray, but the white navigation links have gray bleeding below and to the right of each link. It also screws up any border I try to put between the navigation menu and anything else below it. Here is the markup: <div id="container"> <div id="header"> <h2>Test Header</h2> </div> <div id="left_column"> <ul> <li class="main_nav"><a href="#">Link 1</a></li> <li class="main_nav"><a href="#">Link 2</a></li> <li class="submain_nav"><a href="#">Sublink 1</a></li> <li class="submain_nav"><a href="#">Sublink 2</a></li> </ul> <p class="p_left_column">This stuff goes below the main navigation menu.</p> </div> <div id="main_column"> <h2>A test heading.</h2> <p>A test paragraph.</p> </div> <div id="footer"> Test footer </div> </div> And here is the style sheet for div left column: #left_column { float: left; width: 160px; margin: 0; padding: 0; line-height: 130%; } #left_column ul { padding: 0; margin: 0; list-style: none; } li.main_nav, li.submain_nav { text-align: left; width: 100%; display: block; /*border-bottom: 1px solid #aaa;*/ } li.submain_nav { line-height: 110%; } li.main_nav a { padding: 5px 0 5px 8px; display: block; color: #0380B7; font-size: 16px; background: #fff; text-decoration: none; } li.main_nav a:hover, li.submain_nav a:hover, li.main_nav a.active:hover, li.submain_nav a.active:hover { background: url(./images/right_arrow.gif) left no-repeat #eee; color: #00F; } li.submain_nav a { padding: 0 0 1px 20px; display: block; color: #0380B7; font-size: 13px; background: #fff; text-decoration: none; } li.main_nav a.active, li.submain_nav a.active { background: url(./images/right_arrow.gif) left no-repeat #fff; color: #00F; } p.p_left_column { font-size: 13px; line-height: 130%; font-family: arial, helvetica, sans-serif; border-top: 1px solid #aaa; padding: 5px; color: #000; } p.p_left_column a { border-bottom: 1px dashed #99CF16; text-decoration: none; color: #0380B7; } p.p_left_column a:hover { border-bottom: 1px solid #00f; color: #00f; } Any help would be greatly appreciated. Thanks for reading. please click here to read my message. My code: Code:
#whitebox {
width:600px;
background-color:#fff;
padding:10px;
margin-left:auto;
margin-right:auto;
}
#salmonbox {
width:500px;
height:50px;
padding:10px;
background-color:salmon;
margin-left:auto;
text-align:left;
}
Hi I have a master page in my .net project that has a template. In this template it has a line for all links a:link { color......} So all my pages get this style sheet. Now I have a jquery tab plugin that has a theme and it also uses a:link{} but it uses white but the a:link in my master page is overriding this. When I look with firebug at the css the color from the jquery theme is crossed out. How can I stop this from being crossed out? Hey all.. I'm still new to CSS in general, but know how it works. Anyway, I'm trying to get an element in a DIV to display properly, but for some reason, it isn't Code:
.contenthead {
background-image: url(player/images/player_03.gif);
background-repeat: repeat;
height: 50px;
color: #000000;
font-weight: bold;
font-size: 40px;
}
The result is at http://www.fairfieldmediacoop.com/fpactest/play.php?recordID=hO2GmjtlvSJKBgcqp4LZ The only thing I can think of is that the text I am trying to enlarge, which is the "Chamber Talk" in black above the video (center of the strip under the header) is encased in a Table. Would that cause it not to listen? i have a horizontal navigation pane in which i want 5 links to be placed across the top. any ideas? ive tried setting the width a percentage and a fixed width but no luck. width:50px; I need someone to look at my site and see why it doesnt work right in internet explorer, and looks fine in mozilla and google chrome. I am sure it has something to do with a .css file somewhere. glockpartsrus.com/products.php?cat=46 for an example. Hi All, I am trying to make my table do the attached, where it has a border around the entire table but has a 2px space edge... Like the attched image, any ideas? I'm so excited! I recently decided to try again (the third time) to see if I could convert my horrid table layout to divs. I was finally able to make something reletivly good in most browsers, but I am still having alot of browser-related problems! Normally I would have given up by now...but i found that my table layout was at 28 seconds over 56.6 ( :O ) and once i converted it it was only 3 seconds over (double :O ) Anyway, pretty much everything validates (including the css) when I put in the doctype, but when the doctype is in it looks like a mess in all browsers. I've been using transitional xhtml. When I take it out it looks better in all browsers, but is still really bad in all but IE. I have put together on my site two pages with the same code except one has the doctype and the other doesn't. The css for both is: Code: body {
background: #EFF7FF url(bg.gif);
text-align:center;
padding:0;
}
#outer {
border:5px double #234B77;
width:650px;
padding:0px;
margin:0px;
}
#hdr {
width:650px;
height:151px;
background: #21558C;
}
#bar {
width: 650px;
height:90px;
background: #ADD7EF url(rainbowsitedesign_2x1.gif);
border:solid #000000;
border-width:0px;
padding-top: 37px;
text-align:left;
}
#bodyblock {
position:relative;
background: #ADD7EF url(backgroundforsite.gif);
width:650px;
padding:0;
}
#l-col {
float:left;
background: #ffffff url(white.gif);
color: #333333;
width:140px;
border-left: 1px solid #234B77;
border-right: 1px solid #234B77;
border-top: 1px solid #234B77;
border-bottom: 1px solid #234B77;
margin-top:10px;
margin-bottom:10px;
margin-left:5px;
margin-right:5px;
}
#coltop {
height: 42px;
background: #3971B5 url(tabletop.gif);
color: #000;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#cont {
width:485px;
background: #ffffff url(white.gif);
border-left:1px solid #234B77;
border-right:1px solid #234B77;
border-top:1px solid #234B77;
border-bottom:1px solid #234B77;
text-align:left;
margin-top:10px;
margin-bottom:10px;
margin-right:5px;
font-size: 100%;
font-weight: normal;
color:#1A3958;
}
#contentop {
width:485px;
height:42px;
background: #3971B5 url(tabletop.gif);
color: #333333;
border-left:0px solid #234B77;
border-right:0px solid #234B77;
border-top:0px solid #234B77;
border-bottom:1px solid #234B77;
margin:0px;
text-align: center;
padding:10px;
font-size: 105%;
font-weight: bold;
color:#1A3958;
}
#ftr {
width:650px;
height:25px;
background:#346EB4;
color: #333333;
border: 0px solid #000000;
margin:0;
}
#ftr2 {
width:650px;
height:25px;
background:#346EB4;
border: 0px solid #000000;
margin:0;
}
#ftr3 {
width:650px;
height:99px;
background: #346EB4 url(websitedesign.gif);
border: 0px solid #000000;
margin:0;
padding-top: 20px;
}
#home {
width:50px;
height:10px;
border: 1px solid #000000;
margin:0;
}
p:first-letter {
font-size: 120%;
font-weight: bold;
}
a.red:link { text-decoration: none; color: #234B77; }
a.red:visited { text-decoration: none; color:#ff0000; }
a.red:hover { text-decoration: underline; color:#ff0000; }
a.orange:link { text-decoration: none; color: #234B77; }
a.orange:visited { text-decoration: none; color: #ff6600; }
a.orange:hover { text-decoration: underline; color:#ff6600; }
a.yellow:link { text-decoration: none; color: #234B77; }
a.yellow:visited { text-decoration: none; color: #ffff00; }
a.yellow:hover { text-decoration: underline; color:#ffff00; }
a.green:link { text-decoration: none; color: #234B77; }
a.green:visited { text-decoration: none; color: #009900; }
a.green:hover { text-decoration: underline; color:#009900; }
a.blue:link { text-decoration: none; color: #234B77; }
a.blue:visited { text-decoration: none; color: #0000ff; }
a.blue:hover { text-decoration: underline; color:#0000ff; }
a.violet:link { text-decoration: none; color: #234B77; }
a.violet:visited { text-decoration: none; color: #660066; }
a.violet:hover { text-decoration: underline; color:#660066; }
#ftr2 a:link { text-decoration: underline; color: #152F4D; }
#ftr2 a:visited { text-decoration: line-through; color: #ccc; }
#ftr2 a:hover { text-decoration: none; color: #88B2DC; }
Here are the two pages: With doctype: http://rainbowsitedesign.com/withdoctype.html Without it: http://rainbowsitedesign.com/nodoctype.html How can I fix both my browser problems and my doctype problems? Any help is app! Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John I am using the following code. In firefox the input box (including the border) fits a nice box of 83 by 15. In IE it seems to not be so well, and is bothering things near it. Any ideas on how to rectify this? Code:
<td><input type="text" class="loginbox" size="13" /></td>
.loginbox
{
border: 1px;
border-style: solid;
border-color: #9AA8C3;
padding: 0;
margin: 0;
text-decoration: none;
font-size: 11px;
color: #40668C;
}
|
|||||||