|
CSS - Dynamic/liquid For Text Sizing And Width?
i want to fit in my 'Did you know?' panel beside my ad, but i'm having a lot of trouble... the ad is 468x60. here is the panel:
Code: <div class='ocontentsection panelmargins floatleft' style='margin-left:8px; height:101px; width:167px;'>
<h2 class='aligncenter' style='text-indent:0;'>
Did you know?
</h2>
<div class='contenttext' style='font-size:9px;'>
<p class='nomargins'>
<?php
$tips = array(
"The formula generating your VIPortals Score is:
<strong>Games Played * 2 + Votes Casted * 3 + Comments Added * 4 + (Games Played + Votes Casted + Comments Added) * 5</strong>",
"The money awarded to the winners of every contest comes from the <strong>advertisers</strong> who are paying us to place their ads here."
);
$rand_index = round(rand(0, count($tips) - 1));
echo $tips[$rand_index];
?>
</p>
</div>
</div>
look here in the middle of the page i want the text to fit inside the box too :S is there a better way of doing this? as you can see, i had to set a bunch of widths and stuff... thanks. Similar TutorialsNow that I've decided to use CSS and divs to hold my content, how do I make my page expand if a reader enlargens font size through his or her browser (especially if they use Firefox which can keep enlargening the font many sizes)? After enlargening the font size two steps in FF, the text expands so much it covers up other text in other divs, hides to the left and right, etc. Is liquid design what I want? Is liquid design what keeps divs expanding to accommodate enlargened font size? If so, where can I best learn liquid design online? Running into some issues with a design. I have provided a link to show what is happening. at the end, with some code, css, etc The design calls for using up as much space width wise as possible, so that if the resolution gets bigger, the content in the main content section will expand. There is a left side nav, which is a fixed width, and then the main content section, which I do not know the width. both are floated left. The problem is, when the content in the main section expands to get bigger, in Firefox, will expand the size of the main section div to 100% of the screen before the text will flow to the next line, and thus, throws the div (which is floated) down to the next line. Without setting a width of the main content div, and wanting to keep the left side nav a specific width, I am not sure how to avoid this problem. I just happened check in IE7, and it seems to do what I want (I haven't checked IE6). I have posted a screenshot of what happens. On the left side, is IE7, at a bigger resolution also (1280) right side of screenshot is firefox, at a smaller resolution (1024) http://ricebox.whiteazn.com/liquid.png here is some code. Also, the CSS will seem to be declared more than once, but that is because they are split up between structure.css, text.css, and theme.css. I also only put in the CSS for the main body part. Any help would be appreciated. ======================= html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Control Panel: Company Name</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="scripts/p3p.xml" rel="P3Pv1" /> </head> <body> <div id="header"> <div class="logo"> <img src="images/header/logo.jpg" width="197" height="67" alt="alt" title="title" /> </div> <div class="nav"> <div class="parent-drill"> </div> <div class="manage-nav"> <ul id="main-nav"> <li><a href="?ebxid=221" class="inventory">Inventory</a></li> <li class="selected"><a href="?ebxid=700" class="leads">Leads</a></li> <li><a href="?ebxid=500" class="analytics">Analytics</a></li> </ul> </div> </div> <div class="details"> <div class="account-info"> Company Name <span class="rep">First Name</span> </div> <div class="account-details"> <ul id="account-nav"> <li><a href="?ebxid=725">Settings</a></li> <li><a href="?ebxid=244">Account</a></li> <li class="logout"><a href="?logout">Logout</a></li> </ul> </div> </div> </div> <div id="header-seperator"> </div> <div id="main-body"> <div class="top"></div> <div class="bot"></div> <div id="section-nav-narrow"> <div class="title-hdr"><h3>Leads</h3></div> </div> <div id="body-content">main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page<br />main page<br />main page<br />main page<br />main page<br />main page<br /> main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page main page </div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> CSS Code: Original - CSS Code #main-body { overflow: hidden; margin-left: 10px; position: relative; } #main-body #section-nav-narrow { float: left; width: 133px; } #main-body .title-hdr { margin: 6px 3px 0 3px; padding: 0 0 6px 9px; } #main-body #section-nav-narrow .title-hdr { width: 118px; } #main-body .top { position: absolute; top: 0; left: 0; width: 133px; height: 8px; } #main-body .bot { position: absolute; bottom: 0; left: 0; width: 133px; height: 1px; } #main-body #body-content { float: left; min-width: 860px; } #main-body { background: #fff url(../images/cp_template/left_nav.gif) left top repeat-y; } #main-body #section-nav-narrow { } #main-body .top { background: #fff url(../images/cp_template/left_nav_top.jpg) left top no-repeat; } #main-body .bot { background: #fff url(../images/cp_template/left_nav_bot.gif) left top no-repeat; } #main-body .title-hdr { background-color: #fff; color: #1b5094; } #main-body #section-nav-narrow h3 { } #main-body .title-hdr h3 { font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 11px; }
After many months of enjoying my new bike club site (http://www.valleyspokesmen.org) I've decided that I want to abandon the semi-liquid display for now and explore a fixed-width site. While my skills are growing, I am not so sure of myself that I feel I can make major changes to my style sheet without risking a crash and burn. So I come seeking advice. Currently when a visitor to my site clicks 'n grabs the right edge of their browser window and pulls to the right or left, the banner photo and title, five main drop-down links, and the center column all move accordingly. I'd like to assign a fixed width, like the old days when we just set the table to a width of 700px or something. Below represents what I *think* are the key parts of my .css file. #wholePage is a div that provides overall style. contentLeft, contentMain and contentRight are div's that represent the three columns that make up the pages. Can you share how I might edit my style sheet so that my site is of fixed width? If the style info below is unsufficient, let me know and I can display the whole .css file, if you like. Code:
#wholePage {
font: 90%/1.1 trebuchet, arial, helvetica, serif;
width:96%; margin:0px auto; color:#333;
}
#contentLeft {
float:left; width:180px; margin:0; padding:0 1em;
font-size:12px; border-right:1px solid #ddd;
}
#contentMain {
margin-left:200px; /* border-left:1px solid #ccc; */
margin-right:200px; /* border-right:1px solid #ccc; */
padding: 0 1em;
}
#contentRight {
background: url(../images/bg_logoRt.png) repeat-y fixed top right;
float:right; width:180px; margin:0; padding:0 1em; font-size:12px;
border-left:1px solid #ddd;
}
#footer {
clear:both; margin:0; padding:0.5em; color:#333;
border-top:2px solid green;
}
Thank you very much for your valuable time. Whenever I work on a liquid layout, I have been setting the Max-Width to 1280px. Is this still the normal setting? Or designers do go wider these days? Thank you Hi, I'm having a problem a liquid layout using 100 percent width. The inner box peeks out side to the right of the containing box (which is 100% width). I am viewing with firefox. At a resolution of 1024 width. With IE 6 it's very nasty looking (extremely wide). Can anyone tell me what I need to do or what I'm doing wrong please I have simplified the page to highlight the problem I'm having a problem on this page http://www.jamesfarrell.eu/fixhtml/search.htm HTML as follows: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <link href="fixlayout.css" rel="stylesheet" type="text/css"/> </head> <body> <div id='wrap'> <div id="content"> <div class="searchresult1"> <h3><a href='info.php?id=486'>rent in france</a> (222.00) per week)</h3><a href=info.php?id=486><img src='images/no_image.gif' width='130' height='127' border=0 /></a><p>1 Bedrooms, 0 Bathrooms, House</p><p>s..</p> <a href='info.php?id=486'>More details</a> </div> </div> </div> <!-- <div id="goToTop" class="sNav"><p><a href="#content">^ Top</a></p></div> --> </body> </html> CSS as follows: Code: body {
color: #333333;
background-color: white;
font-size: 12px;
line-height: 1.3em;
margin: 0;
padding: 0;
border:1px solid black;
width:100%;
}
#wrap {
background: white;
margin: 0 0 2em 22%;
}
#content {
padding:0;
border-right: 1px solid #ccc;
margin-right: 4em;
width:97%;
margin-left:2.75%;
}
div.searchresult1 {
width:800px;
width: expression(this.width > 400 ? 400: true);
margin-top:20px;
margin-right:40%;
border:1px solid #9eceeb;
}
div.searchresult1:after {
content:".";
display:block;
clear:both;
height: 0;
visibility: hidden;
}
div.searchresult1{display: inline-block;}
/* Hides from IE Mac \*/
* html
div.searchresult1{height: 1%;}
div.searchresult1{display:block;}
/* End Hack */
div.searchresult1 h3{
background: #c0ddea;
margin:0;
padding:4px;
}
div.searchresult1 h4{
background: #c0ddea;
margin:0;
padding:4px;
border:1px solid black;
}
div.searchresult1 img {
margin: 10px;
float:left;
border:1px solid black;
}
Hi Guys, I have a layout which is currently setup to be liquid. Aka it spreads out depending on how big the browser window is. I'm trying to get it to be a set width. I can't quite get it figured out. Here is the link to the current layout (made to be generic). It's a layout I got from a CCS class. http://65.175.116.253/design/demo.html The css is here http://65.175.116.253/design/css.css The entire package can be downloaded here http://65.175.116.253/design/design.rar Now, to explain how I want it to look, I took my browser and made it just wide enough to show how wide I want the layout to be, and took a screenshot. But I can't get my css to make the whole layout that wide.. I'm scracthing my head here because it's probably really easy. http://65.175.116.253/design/demo.jpg Let's not worry about the exact width, but I want to define in the css the pixel width, so that can be changed whenever. Here is the CSS Code: /*--- Generic Styles ---*/
body
{
background: #e3edc2; color: #333;
font: .8em, Arial, verdana, sans-serif;
margin: 0;
padding:0px;
}
#main {width:840px; margin:18px auto 0 auto; _text-align:left;}
a
{
color: #686397;
}
a img
{
border: 0px none;
}
p
{
margin: 0 0 1em;
}
.smallboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .7em;
font-weight: bold;
}
.mediumtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
}
.mediumboldtext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: .9em;
font-weight: bold;
}
.largetext
{
font-family: verdana, helvetica, sans-serif;
color: #686397;
font-size: 1.5em;
}
/*--- Header Styles ---*/
#header
{
margin-bottom: 1.75em;
padding-top: 1px;
background: #abd240;
}
#navbar
{
margin: 0;
padding: 0.5em 3em;
background: #686397;
color: #fff;
}
#navbar li
{
display: inline;
margin-right: 0.5em; padding-right: 0.75em;
border-right: 1px solid #99c;
font-weight: bold;
}
#navbar li.last
{
border: 0px none;
}
#navbar a
{
color: #d4ec84;
text-decoration: none;
}
#today
{
text-align: right;
margin-top: -1.66em; padding: 0 2em 0 0;
color: #fff;
line-height: 1;
}
/*--- Content Styles ---*/
#content
{
float: left;
padding: 0 20em 4em 3em;
}
#content h1
{
background: #fff; color: #686397;
font-size: 1.5em;
margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
}
#content h1 b
{
color: #b0d742;
}
#content h2
{
margin: 0.5em 0; padding-bottom: 0.25em;
border-bottom: 1px solid #b0d742;
font-size: 1.5em;
}
/*--- Content Styles ---*/
table.basic
{
border: 0px;
width: 100%;
border-collapse: collapse;
}
table.basicborder
{
border: 2px solid #b0d742;
width: 505px;
border-collapse: collapse;
}
table.mainsearch
{
border: 2px solid #b0d742;
width: 415px;
border-collapse: collapse;
}
/*--- Sidebar Styles ---*/
#sidebar
{
float: right;
width: 17em;
margin: 0 1em 4em -18em; /* this creates a mathematical layout width of -1 */
}
#sidebar div h3{
background: #9b96ca;
}
#sidebar form_div
{
margin: 0; padding: 0.8em;
}
#sidebar div{
background: #3a3c2d; color: #fff;
padding: 0 1em 1em;
margin-top: 0.75em;
}
#sidebar div h3{
font-size: 1.25em;
margin: 0 -0.8em; padding: 0.4em 0.8em;
text-transform: lowercase;
}
#whatiscompany h4{
margin: 0 0 0.5em; padding: 0.5em 0;
border-bottom: 1px solid #fff;
font-weight: normal;
}
#whatiscompany p:first-line{
font-style: italic;
}
/*--- Footer Styles ---*/
#footer
{
clear: both;
padding: 1.5em 3em;
background: #a0c63a;
height: 15px;
}
#footer p
{
margin: .1em;
}
#footer a
{
color: #333;
text-decoration: underline;
}
I'm trying to make up a thumbnail page that shows pics in a row at a constant height. I don't want the images distorted so the width will vary. I tried: Code: img.proj_thumb {border-style:none; height:75px; width:auto}
Ths worked on mylaptop, but fails on the server - see the attached pics. Any suggestions? This is not too important but my site (http://www.o0matte0o.myby.co.uk/) Sorry nearly fixed it sorry just gotta work out how to get the background to cover the text aswell Well, I know CSS however I am a bit confused with fixed width and liquid layouts as far as I know fixed width is where you set a divs width in pixels and liquid is in % so it scales to the users screen size? Which one is best to use? Also, I have the following style sheet which I created, I am guessing this is a liquid layout? Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 15px;
background-color: black;
color: white;
}
#header {
width: 100%;
margin-bottom: 10px;
border-bottom: 1px solid white;
}
#header h1 {
padding-left: 25px;
margin-bottom: 0px;
}
#content {
padding: 10px;
margin-left: 200px;
border-left: 1px solid white;
}
#content h1, h2, h3, h4, h5, h6 {
text-align: center;
}
#nav {
float: left;
padding: 10px;
padding-left: 15px;
width: 20%;
}
#nav li {
list-style-type: none;
}
#nav a {
text-decoration: none;
}
#footer {
clear: left;
border-top: 1px solid white;
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid white;
width: 100%;
}
a {
color: silver;
text-decoration: underline;
}
a:hover, a:focus {
font-weight: bold;
}
a:visited {
font-style: italic;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px;
}
p {
margin: 5px;
}
select {
width: 30%;
}
textarea {
width: 40%;
}
.floatimage {
float: left;
margin: 10px;
}
Is there anyway to stop someone from changing the text size with their browser? Before everyone starts shouting "NO DON'T DO THIS!", I don't want to do it for everything. I have some buttons that are created with CSS and lose the formating when the text size is changed. I tried adding: Code: font-size:8pt; but that didn't work. Hi all, I'm building my first experimental CSS site, and I'm trying to attain accessibility for the widest array of users. While testing various browser settings, I came across this issue. (I'm looking at the site in IE, as I'm at work. I'll be able to look it over in other browsers when I get home.) When my site is viewed with text set to "Medium," everything appears fine: http://www.flickr.com/photos/251449...in/photostream/ When my site is viewed with text set to "Larger," the text in the middle left section doesn't fit: http://www.flickr.com/photos/251449...in/photostream/ Fair enough. But here's what has me stumped: when the site is viewed with the text set to "Largest," it fits again: http://www.flickr.com/photos/25144998@N00/4997174984/ I've learned alot very quickly in the last week or so, but this really has me over a barrel. Any ideas? CSS Code: body
{
background-color: #393939;
font-family: sans-serif;
font-size: 100%;
margin: 0;
padding: 0;
}
.header
{
text-align: right;
font-weight: bold;
font-size: 1.6em;
}
.clickables
{
text-align: right;
font-weight: bold;
font-size: 0.95em;
}
.content
{
text-align: right;
font-size: .8em;
}
.navbutton
{
float: right;
width: 5em;
background-color: #ffcc00;
color: #666666;
height: 1em;
text-align: right;
font-weight: bold;
font-size: 0.95em;
margin: .75em 0.2em .75em 0em;
}
#mother
{
margin-left: auto;
margin-right: auto;
min-width: 720px;
max-width: 1000px;
width:expression(document.body.clientWidth > 1000? "1000px": "auto" );
width:expression(document.body.clientWidth < 500? "500px": "auto" );
}
#UpperLeftWrapper
{
float: left;
width: 35%;
background-color: #7d7d7d;
}
#UpperLeft
{
height: 8em;
margin: 0;
background-color: #7d7d7d;
}
#UpperRightWrapper
{
float: right;
width: 65%;
background-color: #666666;
}
#UpperRight
{
float: right;
width: 7em;
height: 7em;
margin: 0;
padding: .5em;
background-color: #666666;
color: #ffcc00;
}
#MiddleLeftWrapper
{
float: left;
width: 35%;
background-color: #ffd426;
}
#MiddleLeft
{
float: right;
width: 8em;
height: 1.2em;
color: #7d7d7d;
background-color: #ffd426;
margin: 0;
padding: 0.6em;
}
#MiddleRightWrapper
{
float: left;
width: 65%;
background-color: #ffcc00;
}
#MiddleRight
{
float: right;
width: 24.85em;
height: 2.45em;
background-color: #ffcc00;
margin: 0em .6em 0em 0em;
}
#LowerLeftWrapper
{
float: left;
width: 35%;
background-color: #e5e5e5;
}
#LowerLeft
{
float: right;
width: 5.8em;
height: 75em;
color: #7d7d7d;
background-color: #e5e5e5;
padding: 0.7em;
}
#LowerRightWrapper
{
float: left;
width: 65%;
background-color: #ffffff;
}
#LowerRight
{
float: right;
height: 88em;
color: #666666;
background-color: #ffffff;
padding: 0.8em 1.1em 2em 2em;
}
HTML Code: <!DOCTYPE html> <HTML> <HEAD> <META CHARSET="UTF-8"> <title>layout three</title> <link rel="stylesheet" type="text/css" href="comp.css" /> </HEAD> <BODY> <div id="mother"> <div id="UpperLeftWrapper"> <div id="UpperLeft" class="header"> </div> </div> <div id="UpperRightWrapper"> <div id="UpperRight" class="header"> <p>demonstration<br>layout<br>number two</p> </div> </div> <div id="MiddleLeftWrapper"> <div id="MiddleLeft"> <div class="clickables"> <p>additional reading</p> </div> </div> </div> <div id="MiddleRightWrapper"> <div id="MiddleRight"> <div class="navbutton"> <p>tab one</p> </div> <div class="navbutton"> <p>tab two</p> </div> <div class="navbutton"> <p>tab three</p> </div> <div class="navbutton"> <p>tab four</p> </div> <div class="navbutton"> <p>tab five</p> </div> </div> </div> <div id="LowerLeftWrapper"> <div id="LowerLeft" class="clickables"> <p> first link<br> second link<br> third link<br> fourth link<br> fifth link<br> sixth link<br> seventh link<br> eighth link<br> </p> </div> </div> <div id="LowerRightWrapper"> <div id="LowerRight" class="content"> <p> Body content here... </p> </div> </div> </div> </BODY> </HTML> Thanks in advance for any advice! Isnt it annoying when you have created a fantastic design with unordered list menus, its looks very fantastic then you open it up on someone elses browser and the design breaks because they have increased/descreased the text size through the browser. One alternative to this is to use text sizes that prevent modifying the text size through browser. However, this doesnt FIX the problem, it only prevents it which means old lady wont be able to read your site. My main problem is the fact that I have background images and when I increase text size, the text increases, but the background images to steatch with the content. Anyway to fix this? Hi all, I've got a problem with CSS, and while I usually can fix them myself, I can't seem to find a solution to this one. I want to create a centered block with a dynamic width using almost nothing but CSS (except for the div in the HTML code). Not specified by percentages, but instead specified by the distance from both the left and the right border of the block to the body. So what I want is to specify the left and right properties of the DIV, so my first attempt was: Code: #block {
position: absolute;
top: 40px;
right: 40px;
left: 40px;
height: 40px;
}
In Opera and FireFox it worked fine, but in Internet Explorer the block had no width. Does anyone know of a way to accomplish this? Here's the code: Code: <table class="tab_thin_table"> <tr> <td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 1</td><td class="tab_end_off" rowspan="2"></td> <td class="tab_start_on" rowspan="2"></td><td class="tab_bg_on" rowspan="2">Example 1 ON</td><td class="tab_end_on" rowspan="2"></td> <td class="tab_start_off" rowspan="2"></td><td class="tab_bg_off" rowspan="2">Example 3</td><td class="tab_end_off" rowspan="2"></td> <td class="tab_thin_spacer"></td> </tr> <tr> <td class="tab_thin_top"></td> </tr> </table> Here's the CSS: Code:
tab_thin_table
{
width: 578px;
vertical-align: top;
}
.tab_thin_top
{
height: 1px;
background-color: #6E7073;
}
.tab_thin_spacer
{
height: 19px;
}
.tab_start_on
{
width: 6px;
height: 20px;
background: url(../container/tab_start_on.gif);
background-repeat: no-repeat;
}
.tab_bg_on
{
background: url(../container/tab_bg_on.gif);
}
.tab_end_on
{
width: 10px;
height: 20px;
background: url(../container/tab_end_on.gif);
background-repeat: no-repeat;
}
NOTE: tabs with "off" are same as tabs with "on" just different image Here's the problems As you can see the tab_thin_spacer and tab_thin_top sit on top of each other. The cells with are using the tab ons and offs are of dynamic widh determined by each page. However, the tab_thin_table is a set width. I need tab_spacer and tab_top to always stretch the rest of the existing width of the table; whatever width is not taken up by the tab ons and offs Thanks I've run into a problem with a 3-column layout I'm making. The problem is to get the columns equally high. Previously I've just made the "illusion" of equally high columns by making a background image and repeating it in the y-direction (like this). This works fine as long as the page has a fixed with - in this case the left and right column have a fixed width but the center column is dynamic. So, how can I make all the columns look equally high? (without using tables, obviously) Btw, I can't show you an example of the page, but hopefully you'll get the picture and could point me to an article or something about the subject. EDIT: Never mind! I found an example and it worked! http://www.pixy.cz/blogg/clanky/css-3col-layout/ <-- thats the one. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. A left floating text box that text wraps around the top, right and bottom is not rendering at the same size in all browsers (IE and Firefox are my main test platforms). The page was going pretty well, thanks to some help I have already received, but I hit a snag on this. Please take a look at the test page below. TEST PAGE The relevant style code follows: Code:
.textboxleft
{
background: #3E5C92;
font: normal 0.8em/140% arial, helvetica, sans-serif;
margin: 10px;
width: 160px;
border: 1px solid #E4E7F5;
float: left;
overflow: hidden;
padding: 0.5em;
}
.textboxleft p
{
color: #000000;
}
ul li
{
color: #E0E0F6;
font: normal 0.9em/135% tahoma, arial, helvetica, sans-serif;
}
Of course, you can also look at the complete source code and download the css file for more information. I would be happy to provide any additional information. If there is something I can alter in the CSS to make the box 160px wide (or whatever I decide on) in all browsers, please let me know. I am very new at this and have only gotten this far with the help of people like you. Thank you, Grump PS: you will also notice another thread concerning the bulleted list problem you see. It bumps into the text box and doesn't look good. Please excuse any redundancy, but these are 2 different problems, I think. this should be simple, but im just not finding my answer. im trying to figure out how to evenly spread several links across a fixed width. i could manually set the padding or margins for each link, but i figure there has to be a way to do it in css automagically. Hi, I am creating a site with drop down menus, done purely in CSS. If I don't set the 'width' parameter for 'ul' element then in IE7, Firefox and Opera the menu appears fine. In IE6 however the menu just stacks vertically unless I set the width parameter. The reason I don't want to set width is because I would like the top level menu items to just be the length of the text as in IE7 etc. One item is particularly longer than the others and so wastes space. The code for this element: Code:
#menu ul {
list-style: none;
margin: 0;
padding: 0;
/*change for IE6*/
/*width: 7em;*/
/*stops going onto two lines but then just becomes hidden*/
/*white-space: nowrap;*/
/*
width: auto;
min-width: 40px;
*/
float: left;
}
Is there any way to set the width to be that of the text contained? IE7, Firefox and Opera seem to do this automatically. After extensive searching I have tried auto width, floating in different ways, setting min-width as well as setting no-wrap but no joy. Is there a way to do this, or will I need to configure a set width to make it backwards compatible? Thanks. I must be missing something really simple... but it seems that setting style ="text-align:center; width:300px" or anything equivalent doesn't work (for me). I don't find anything that says they can't be used together, but when I do, my div is suddenly left-aligned. I have tried placing the two items in a single division and also nesting divisions with one attribute in each... Nothing seems to work: <div style="text-align:center; border: 7px red ridge; height:300px; width:300px;"> fails; Take out the width: div style="text-align:center; border: 7px red ridge; height:300px; "> and it centers just fine. (at least netscape and safari both have this result) any ideas? (I must be blind) |
|||||||