|
CSS - Font-stretch Doesnt Work
i want to make a word Stretch across a givin width... when ever i set it to expanded, wider, or any of the others... nothing happens to the text.. does anyonw know how this works?
Similar TutorialsCan someone please tell me what the font-stretch property within CSS does? I have been playing around with the following online example, but the way the text is rendered never changes. [access the world wide web]w3schools.com/js/tryit.asp?filename=try_dom_style_fontstretch Could someone please tell me how to use the font-stretch property? I am just trying to see what it does. Thank you! The font-stretch property, for example:
css Code: Original - css Code font-stretch: condensed; font-stretch: condensed; doesn't seem to be adequately supported by most browsers, even though it has been part of CSS 2 for quite a while. Most references I checked seemed to point to system font dependency, i.e., if your system does not have a condensed or expanded version of that particular font installed, no change in font width will appear. Why is this? Microsoft Word has an algorithm to stretch and condense all fonts, not just those with special versions. Why can't the css standard use a similar display algorithm to implement font-stretch? I got this WP style, and I edited it quite a bit. Code: #menu {
clear: right;
float: left;
position: relative;
padding:0 10px 0 10px;
margin:0 0 0 34px;
width: 160px;
/* border-left: 1px solid #bbaf95;
border-right: 1px solid #bbaf95; */
background: #fff rl(wp-images/bg.png) repeat-y 100% 0;
}
The problem being is that the image border does not reach the where the css borders were, and it does not stretch 100% to the bottom either. Even more, it takes three seconds to load from where it use to take less than one. Check it out: http://randomized.us Thanks in advance. Hey gang, My suckerfish menu wonk work properly in ie5.5 and ie6 but works fine in all the others... the problem is that if i hover over main link that drop down menu will appear but then wont stay there when i hover the mouse over the submenu. i removed all the content from below the menu and suddenly it works, but my site needs content! Has anyone had this problem before??? #navi { width: auto; background: url(images/navi01.jpg) repeat-x top left; } #navi, #navi ul { /* all lists */ padding: 0px 0px 0px 26px; margin: 0; list-style: none; height: 29px; } #navi a { font-weight: bold; margin: 8px 0px 0px 0px; color: #ffffff; display: block; width: auto; padding: 0px; text-decoration: none; } #navi li { float: left; width: auto; padding: 0px 26px 0px 26px; } #navi li ul { position: absolute; width: 160px; left: -999em; padding: 7px 0px 0px 0px; margin: 0px 0px 0px -17px; } #navi li ul li { width: 160px; height: auto; padding: 0px 0px 0px 0px; border-top: 1px solid #ffffff; border-bottom: 1px solid #cfcfcf; border-left: 1px solid #ffffff; border-right: 1px solid #cfcfcf; overflow: visible; } #navi li ul a { background-color: #f2f2f2; color: #1989d1; padding: 3px 16px 4px 16px; margin: 0px; } #navi li.heading { border-top: 1px solid #7fa7bf; border-bottom: 1px solid #67889b; border-left: 1px solid #7fa7bf; border-right: 1px solid #67889b; } #navi a.heading { background-color: #799eb5; color: #ffffff; padding: 3px 16px 4px 16px; } #navi li:hover ul, #navi li.sfhover ul { /* lists nested under hovered list items */ left: auto; } <script type="text/javascript"> <!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("navi").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]> </script> </head> <body> <div id="border"> <div id="container"> <div id="content_left"> <div id="header"><div id="header01"></div></div> <ul id="navi"> <li> <div><a href="">About Us</a></div> <ul> <li><a href="">History</a></li> <li><a href="">Staff</a></li> <li><a href="">Employment</a></li> </ul> </li> <li> <div><a href="">Products and Services</a></div> <ul> <li class="heading"><a href="" class="heading">Support Services</a></li> <li><a href="">Customer Support</a></li> <li><a href="">Advanced Support</a></li> <li class="heading"><a href="" class="heading">Professional Services</a></li> <li><a href="">Engineering Services</a></li> <li><a href="">Project Managemant</a></li> <li><a href="">Software Development</a></li> <li><a href="">Consulting</a></li> <li class="heading"><a href="" class="heading">Solutions</a></li> <li><a href="">Voice over IP (VOIP)</a></li> <li><a href="">Information Lifecycle Management (ILM)</a></li> <li class="heading"><a href="" class="heading">Procurement Services</a></li> </ul> </li> <li><div><a href="">Contact Us</a></div></li> <li><div><a href="">Links</a></div></li> <li><div><a href="">News</a></div></li> </ul> <ul> doesnt work in IE properly? I have problem with IE7 and < code: html: <ul> <li><a href="A.html">A</a></li> <li><a href="B.html">B</a></li> <li><a href="C.html">C</a></li> </ul> If I open site with IE7 pages B.html and C.html works fine, whereas A.html loose its css for navigation (ul a:link etc..) any ideas? code for css: #containerNavigation { margin: 0; float: left; width: 100%; background: #990000; } #navigationHorizontal { zoom: 1; width: 750px; margin: auto; padding-right: 0; height: 35px; } #navigationHorizontal ul { float: right; padding: 0; margin: 0; list-style: none; width: 749px; } #navigationHorizontal li { padding-right: 0; margin: 0; display: inline; } #navigationHorizontal li a { float: left; color: white; text-decoration: none; text-align: center; background-color: #990000; line-height: 35px; margin: 0 0 0 0; padding: 0 25px 0 28px; font-size: 1.2em; } #navigationHorizontal li a:hover { color: #FFF; text-decoration: underline; } Hey, I have created a site but here is the 1 problem. My CSS doesnt work in firefox. But the site looks perfect in ie; does anyone know why this could happen. Thanks. I use font-family: etc...... color and bgcolor. Thanks. is text align restricted to div tags only? and/or block level elements? and if so, how could i get the program names (ICQ, MSN, Yahoo!) to text-align:left..... and the contact info to align right.... do i HAVE to use a float for this? http://defunctgames.com/contactinfo.htm Hey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ??? Code:
a:link {
color: #333333;
font-size: 11px;
}
a:hover {
color: #333333;
font-size: 11px;
}
a:visited {
color: #333333;
font-size: 11px;
}
ok so I have a menu done via CSS and initially I set up a left border on it so it shows up like this: | menu 1 | menu 2 | menu 3 Now with the help of JQuery I am trying to get rid of the | on the menu 1.. Jquery is applying the class to the correct a selector but the border is not being removed? if I change the css to "border: 1px solid black" it applies the border to the whole of menu 1 but the left border still stays WHITE? the css class is: .removeBorder { border:0; } the menu CSS is: Code:
ul.navigation-1 li a,
ul.navigation-1 li a:link,
ul.navigation-1 li a:visited
{ padding:4px 10px; display:block;text-decoration:none; border-left:1px solid #ffffff;color:#ffffff; width:100%; height:13px; }
If i remove the border-left attribute from here, the border goes away.. and via Jquery I am targetting the A.. so what is the problem? Just a FYI: html code: Code: <div id="left-menu"> <ul class="navigation-1"> <li><a class="removeBorder" href="">Products</a><ul class="navigation-2"><li><a href="">A-Z List</a></li><li><a href=""> I have added a percentage padding to some cells of my website (I'm really obliged to use tables and cells for that part of my website, so please do not suggest replacing the cells to DIVs as a solution). For some odd reason, the percentage padding shows just fine with Opera or Internet Explorer, but does not work at all in Firefox. Here is my CSS (and in dark red bold, the percentage padding concerned): Quote: html, body { margin: 0px; padding: 0px; background-color: #ffffff; font-family: verdana, tahoma, serif; font-size: 11px; color: #000000; } a:link, a:visited { text-decoration: none; color: #ff0000; } a:active, a:hover { text-decoration: underline; color: #ff0000; } form { margin: 0px; } img { border: 0px; } table { border-collapse: collapse; } #top { background: url(../images/top.jpg); height: 100px; } #bar { background: url(../images/bar.jpg); font-weight: bold; color: #ffffff; height: 26px; width: 100%; } #bar1 { position: absolute; top: 100px; left: 0px; background: url(../images/bar1.jpg); height: 26px; width: 4px; } #bar2 { position: absolute; top: 100px; right: 0px; background: url(../images/bar2.jpg); height: 26px; width: 4px; } .bar4 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; width: 200px; } .bar5 { font-family: verdana, tahoma, serif; font-weight: normal; font-size: 10px; height: 18px; } a.nav:link, a.nav:visited { text-decoration: none; color: #ffffff; } a.nav:active, a.nav:hover { text-decoration: underline; color: #ffffff; } img.top { height: 100px; width: 395px; } td.bar1 { padding-left: 6%; } td.bar2 { padding-right: 6%; } td.bar3 { padding-left: 1.4%; } And here is the HTML (in bold again the place concerned): Quote: <?$page='';?><?include'body/head.txt';?> <div id="top"> <img src="images/top1.jpg" class="top" alt=""/></div><div id="bar1"></div><div id="bar2"></div> <table id="bar"> <tr> <td class="bar1"> <a href="index.php" class="nav">Index</a> | <a href="forums.php" class="nav">Forums</a> </td><td align="right" class="bar2"><form method="get" action="http://www.google.com/custom"> <table> <tr> <td><input type="hidden" name="domains" value="xander6669.com"/></td> <td><input type="radio" name="sitesearch" value="" checked="checked"/></td><td>Le Web</td> <td class="bar3"><input type="radio" name="sitesearch" value="xander6669.com"/></td><td>A Labrie.com</td> <td class="bar3"><input type="text" class="bar4" name="q" maxlength="200"/></td> <td class="bar3"><input type="submit" class="bar5" value="Rechercher"/></td> </tr> </table> </form></td> </tr> </table> </body></html> So, anyone knows what the problem is? If you want to view how this thing looks like in Opera/IE/Firefox, just go the http://xander6669.com/. Thanks for any help. Is there any way to make divs stretch to fit the content of the div? I don't want to hear about how to make them stretch to the size of the page. How do you get them to streth to fit what is in them? Hello... I'm having some trouble. I have a container div set to 100% width. I have 2 small fixed width divs floated right and left and then a div between them that needs to stretch to fufill the 100% width while showing the background image of the container div. Works in Firefox, IE7... not so much. Any help is appreciated in advance CSS #container { width: 100%; background: url('images/topM.gif') repeat; } #leftFloat { width: 30px; float: left; } #rightFloat { #width: 30px; float: right; } #middleStretch { height: 25px; } --------------------------- XHTML <div id="container"> <div id="leftFloat"/>image goes here</div> <div id="rightFloat">image goes here</div> <div id="middleStretch">this div should stretch to fill the space between the left & right floats showing while repeating container background image</div> <!--end #container--></div> I feel so STUPID. I have DIV[a] inside DIV[a] is DIV[z] DIV[z] is 200px high. there is no height attribute et for DIV[a] shouldnt DIV[a] stretch atleast to fit in DIV[z] You can see here, in firefox, the dark background only comes down 200px. That is because its height is at 200px, i did that so you could see it. If I remove the height attribute, it dissapears completley. The menu and such on the left are within this div, so it should stretch correct? It works fine in IE. If I need to explain more let me know. Thanks I have been trying to work a lot with CSS3 to rotate, scale, etc. One effect I've been trying to figure out is how to stretch something. I could scale it along the y axis but that's not really stretching. A stretch would mean the top and bottom (or left and right) sides would curve inward. How can I distort an element in this fashion? Hi, I am editing a dynamically driven site and I don't have access to edit the HTML code, just the CSS. I have a <div> with content in it within a <td> tag. When the div stretches past the width of the <td> tag it makes the table cell wider. Is there any way in CSS to have it not stretch the width of the cell? The <div> has an id="mylinks" on it, however the <td> or the <table> doesn't have any id or class on them. I'm pully my hair out trying to figure out a fix, any help would be greatly appreciated, Thanks in advance right.... i have two fixed width columns and i want them to be the same height - the height of whichever has the most content. so i figured i do something like: +---------------------+ | +-----+ +----+ | | | | | | | | | | | b | | | | a | | | | | | | +----+ | | | | | | +-----+ | +---------------------+ (OK - problems with spaces and non breaking thingy.. do you get the idea though? ) the container div will stretch to fit the content, divs a and b will increase in height depending on content. so i was thinking if i set divs a and b to be 100% height it would work. however, this will do nothing if i haven't defined the height of the parent (container). so i think, ok, i'll set that to 100% as well. however this does not work. when i say "does not work" i mean the following: my container div fills the viewport. the column divs stretch from the bottom to the top of the page. -- all ok this far. when i add a load of content, i the div (a or b) will stretch beyond the viewport BUT the other one doesn't. now.. does anyone have any ideas of how i could do this? has anyone seen this anywhere? any help appreciated. d I am working on this template: http://www.oswd.org/design/preview/id/2790 & I need both the white & green content boxes to stretch as I add content. I don't know if this is even possible but would like to know if there is an easier way than having to create another (more stretched) image. Also as the content will be changing frequently I don't want to have to change from one image to another if I can help it. Appreciate any help you can give. http://www.ourdayton.com/index.html?do=regUser reffering to the dark blue box with the form contained in it: With the width set to default, or width:auto, it stretches to fit the parent. If I specify a width, the box will not stretch to hold the content within it. I've also played with min-width/max-width to no avail. I'm sure im just missing/forgetting a property. Here is the code for the box: Code:
#generalBox{
width: auto;
margin-left: auto;
margin-right: auto;
padding: 8px 8px 8px 8px;
border: 1px solid #525c69;
background-color: #212a34;
text-align: center;
}
Hello, I have been playing with this for a few days now and I am completely frustrated. The left side bar and the right side bar I need to auto stretch. I veiwed everything in several different browsers and screen resolutions. I orginally hade a body background picture and it worked perfectly except on firefox at 800x600. It was left aligned instead of centered. So.. I made the backrounds and border colors instead. Now the problem is I cannot get them to auto strech - I am very frustrated. It seems to be all messed up in IE5.5 at 800x600. Can anyone take a look and help me? Thanks in advance! If you need the html - I would be glad to provide it. Here is the css file: body { margin: 0px; padding: 0px; background: #666666 url(images/back.png) repeat-y center top; text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", Times, serif; color: #3399FF; } a { font-weight: bold; text-decoration: none; color: #33CCFF; } a:hover { text-decoration: underline; color: #33CCFF; } /************* HEADER STUFF ************/ #header { width: 995px; height: 200px; margin: 0px auto; padding: 0px 0px; background: yellow; } #header2 { width: 995px; height: 10px; margin: 0px auto; padding: 10px 0px; background: yellow url(images/header.jpg); } #header h1 { margin: 0px; padding: 0px 0px 0px 10px; text-align: left; color: #3399FF; font-size: 3em; text-transform: uppercase; } #header h2 { margin: 0px; padding: 0px 0px 0px 20px; text-align: left; font-size: 1.5em; text-transform: uppercase; } /************* MENU ************/ #menu { width: 995px; margin: 0px auto; padding: 5px 0px 5px 0px; background-color: #000000; height: 28px; } #menu ul { margin: 0px; padding: 0px; list-style: none; text-align: center; margin-top: 12px; } #menu li { display: inline; } #menu a { padding: 5px 19px; text-transform: uppercase; text-decoration: none; font-size: 12px; font-weight: bold; color: #FFFFFF; } #menu a:hover { background-color: #333333; } /************* CONTENT ************/ #content { width: 995px; margin: 0px auto; padding: 0px 0px 0px 0px; } #content h2, #content h3, #content h4, #content h5, #content h6 { font-weight: normal; } #content p, #content ul, #content ol { line-height: 150%; } #left { float: right; width: 680px; padding: 0px 20px 40px 20px; } #right { float: left; width: 230px; padding: 0px 20px 40px 20px; color: #99CCFF; } /************* FOOTER ************/ #footer { clear: both; width: 995px; margin: 0px auto; border-top: 1px solid #666666; background: red repeat-y center top; font-size: 9px; text-align: center; padding: 2px; color: #333333; } #footer2 { clear: both; width: 995px; margin: 0px auto; border-top: 1px solid #666666; background: blue repeat-y center bottom; font-size: 9px; text-align: center; padding: 0px; color: #333333; height: auto; } Hi there, I'm having trouble (right now Im just trying to get firefox to work) getting my #content div to stretch completely vertically. The #main div is stretching correctly, I figured I'd be able to use the same code to get the #content div to stretch. TIA - Mark HTML 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>{$title}</title>
<link rel='stylesheet' href='/css/core2.css' type='text/css' />
</head>
<body>
<div id="main" >
<img src="/images/left_shad_top.png" id="left" alt="left shader" />
<div id="content">
test
</div><!-- end of content -->
<img src="/images/right_shad_top.png" id="right" alt="right shader" />
<div style="clear:both;"></div>
<img src="/images/bottom.jpg" id="bottom"/>
</div> <!-- end of main div -->
</body>
</html>
My CSS Code:
*{
margin: 0;
padding: 0;
}
html{
background-color: red;
}
body{
height: 100%;
background-color: blue;
margin: 0 auto;
}
#main{
min-height: 100%;
background-color: yellow;
width: 850px;
background-image: url( '/images/shad_repeat.png');
background-repeat: repeat-y;
}
#content{
width: 695px;
background-color: green;
min-height: 100%;
float: left;
background-image: url('/images/page.gif');
background-color: #dcdbdc;
background-repeat: repeat-x;
}
#left{
float: left;
}
#right{
float: right;
}
#bottom{
margin-left: 50px;
}
|
|||||||