|
CSS - Using " In Style Sheets
When i specify any background images i never use "" around the location. The reason being is that ive heard this can cause problems in earlier browsers. Can someone confirm what ive heard about this or let me know if there is actually any effect of using ".
Cheers Similar TutorialsHi.. I wanna display different style sheets based on the user's choise. The usage is like this. We have a recruitment site and in that we want to allow ths users to chose the style they want based on a radio button. As soon as they make a choice tthe style sheet should be loaded and it should be saved into the database. Later it can be retrieved from the database and show the client in the respective style they have chosen. Regards Nick Am tryin to use multiple external style sheets in the same html..is it possible??..if it is..how do i use it? I have a question. I am redesigning our website using css and xhtml. I have template for the site and a primary css. On the home page, for example, I also created a home.css. On some of the pages with less additonal css, I have kept it all in the primary css. So is it good to just have one css, or break up some pages that have more css unique to just that page into a different css? My primary css is getting so long - I wonder if it could get confusing since there is a lot in it. Thanks! Hey guys, how do i put the bold command into a css sheet? I want to have bold consistantly throughout a page. ------- body { font-family: Arial; font-size: 13.5px; } td { font-family: Arial; font-size: 13.5px; } th { font-family: Arial; font-size: 13.5px; } .bodystyle { font-family: Arial; font-size: 13.5px; } .small { font-family: Arial; font-size: 9px; } .medium { font-family: Arial; font-size: 12px; } .big { font-family: Arial; font-size: 16px; } .xbig { font-family: Arial, Helvetica, sans-serif; font-size: 24px; } .expanded { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; letter-spacing: 2px; } .justified { font-family: Arial, Helvetica, sans-serif; text-align: justify; } .footer { font-family: "Times New Roman", Times, serif; font-size: 9px; color: #999999; } .box1 { padding: 3px; border-width: medium; border-style: solid; border-color: #CCCCCC #666666 #666666 #CCCCCC; } .box2 { font-style: italic; word-spacing: 2pt; padding: 3px; border: 1px solid; } Hey all, i have about three different style sheets for the same website, all making the website look differently colour & gradient wise depending on which style sheet i use.. My question is how do i make it so that people can select which style they want to view the website in? like on forums when you get a drop down list of different skins and such... im just curious on how id go about making a drop down list of different styles and once a user selects one it will always be that one on their next visit.. Any help on this would be most appreciated. Would it be hard to do this? where should i begin? Note: Im extremely new to this CSS Style sheeting so be gentle lol. The application I'm writing currently uses a Custom tag to generate a table of images and input images to represent tabs. It is working just fine. After implementing a liquid layout on the application the tabs still work, but do not grow larger based on the size of the screen. Also there are always only 7 tabs max per row. I'm looking to try to change this so that the tabs will fit to the space provided. I'm hoping to come up with a style sheet solution that can be applied to code that my custom tag would generate. Here is an example of what my custom tag would generate currently. It is all tables, but could easily be modified to divs or such. I realize this is going to take a bit of work, so I'm just hoping someone may have a suggestion on the direction I could take this. Something that might change the number of tabs on a row as the browser is expanded or contracted.... Code: <div id="content" class="ParentDivBrowse"> <div id="subContent" class="ChildDiv"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_off.gif" /> <input type="image" src="/AppName/images/Properties_0_en_US_off.jpg" alt=" Properties" name="Properties" value="15" onClick="buttonClick(this)"> <img src="/AppName/images/offOff.gif" /> </td> <td nowrap='nowrap' colspan="6"> <input type="image" src="/AppName/images/Fields_0_en_US_off.jpg" alt=" Fields" name="Fields" value="14" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_off.gif" /> <input type="image" src="/AppName/images/DLG_FEOV_0_en_US_off.jpg" alt=" DLG_FEOV" name="DLG_FEOV" value="7" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_FLST_0_en_US_off.jpg" alt=" DLG_FLST" name="DLG_FLST" value="10" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_SHOV_0_en_US_off.jpg" alt=" DLG_SHOV" name="DLG_SHOV" value="8" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_TLOV_0_en_US_off.jpg" alt=" DLG_TLOV" name="DLG_TLOV" value="9" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_OCUR_0_en_US_off.jpg" alt=" DLG_OCUR" name="DLG_OCUR" value="11" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_NOTE_0_en_US_off.jpg" alt=" DLG_NOTE" name="DLG_NOTE" value="12" onClick="buttonClick(this)"> </td> <td nowrap='nowrap' colspan="1"> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_FILT_0_en_US_off.jpg" alt=" DLG_FILT" name="DLG_FILT" value="13" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_on.gif" /> <input type="image" src="/AppName/images/DLG1_T381_FUND1_0_en_US_on.jpg" alt=" DLG1_T381_FUND1" name="DLG1_T381_FUND1" value="0" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/onOff.gif" /> <input type="image" src="/AppName/images/DLG3_T381_FUND2_0_en_US_off.jpg" alt=" DLG3_T381_FUND2" name="DLG3_T381_FUND2" value="1" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG6_T381_TO_FROM_0_en_US_off.jpg" alt=" DLG6_T381_TO_FROM" name="DLG6_T381_TO_FROM" value="2" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG7_T381_MISC_0_en_US_off.jpg" alt=" DLG7_T381_MISC" name="DLG7_T381_MISC" value="3" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_ADER_0_en_US_off.jpg" alt=" DLG_ADER" name="DLG_ADER" value="4" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_PTDE_0_en_US_off.jpg" alt=" DLG_PTDE" name="DLG_PTDE" value="5" onClick="buttonClick(this)"> </td> <td nowrap='nowrap' colspan="1"> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_COOV_0_en_US_off.jpg" alt=" DLG_COOV" name="DLG_COOV" value="6" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap' colspan='2'> <img width='100%' style='min-width:837px;' src='/AppName/images/strip_on.gif'> </td> </tr> </table> </td> </tr> </table></div></div> This is half a PHP problem, but it seems to be more CSS than php, so I'll post it here With web pages on our (And our clients) site, we are experiencing problems with PHP occasionally dropping the style sheet, resulting in no formatting. The CSS file itself does nothing fancy, it simply sets heading and general fonts, colours and sizes for TD's , links, DIVs etc. There appear to be no javascript or other errors when the stylesheet is dropped. It does not happen every time, but is frequent enough to be annoying (Say 1 out of every 10-15 page loads ) The css file is inlcluded in the following manner within the header: Code: <LINK REL="stylesheet" HREF="<?=$base_url?>/main.css" type="text/css"> The Apache server is 1.3.29 PHP: 4.3.5 Server: Free BSD 4.7 Any ideas? Is there anyway to make GoLive automatically apply styles to external style sheets rather than internal? i have a main page with an iframe.. my iframe contain most of my data.. there are 4 types of css for the user to choose.. i have create 4 css.. 1.css, 2.css, 3.css and 4.css... when they user clicks on the first link, the iframe will load 1.css.. if the user clicks on the 2nd link, the iframe will load 2.css.. what shld i do to attain that? Hi, I have a style shete which contains multiple styles for differnet devices - however i am habing problems with the "handheld" media type - it wil lonly display the 1st style of the sheet (if you know what i mean). I have enclosed my code Code:
@media handheld
{
.frmInput
{
width: 1em;
height: 1.3em;
border: 0.1em solid #00004F;
background-color: #F2F2FF;
color:#000000;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.2em;
font-weight:bold;
background-color: #000033;
color:#000000;
}
}
If testing it using visual studio.net 2005's pocket pc 2003 emulator. Can anybody help ?? thanks in advance Andy One of the most common problems i am sure most of us are having it different browsers rendering css in different. What is the best or good way to detect what browser the visitor is using and then give them the right style sheet for their browser? I am unable to use any real server side script like php or .asp Thanks! I swear I've done some searching on this but I haven't been able to find a satisfactory answer. I have a style sheet in the root of my site with this declairation in it: Code:
#nav
{
float: left;
width: 190px;
height: 600px;
min-height: 600px;
margin-right: 10px;
background-image: url(images/gradientBg.jpg);
background-repeat: repeat-x;
}
The file the id="nav" is in is being included in the index.php page that's being called from the root also. So we have a structure that looks like this: Code: /root styles.css index.php /includes nav.php /images gradientBg.jpg The stylesheet is being included like this Code: <link rel="stylesheet" type="text/css" href="/styles.css" /> Now for my problem... The styles and backgrounds all show as expected in Firefox. However, in IE any of the styles that apply to files from the /include directory like nav.php are not followed at all. I find it hard to believe that my only option is to make the styles inline but I'm not sure what else to do at this point. Thanks for staying with me this far and for any advice. Hi there, I've read that for using decorative images in web design its preferred that you apply them as background images instead of using the <img> tag, as using the <img> tag stops the page from displaying until all the images have fully loaded in the browser, where as using a css background image will output the page completely, then start to load in the images (users can start reading the text whilst the images load in). I was just wondering really if anyone else has used this method and gone to the extreme measure if replacing all <img> tags with css background images to dramatically improve their page load speeds? So for example... before Code: <img src="my_thumbnail.jpg" alt="Thumbnail Graphic" title="Thumbnail Graphic" width="100" height="70" /> after Code: .thumb {
background-repeat: no-repeat;
width: 100px;
height: 70px;
}
<div class="thumb" style="backgound-image: url('my_thumbnail.jpg");"></div>
Just an idea really, not sure on how standard compliant it is but I might test it out later to see what speed improvements it brings. I'd be very interested in anyones thoughts I found this great website that shows me how to create these great buttons with some images. http://www.dynamicdrive.com/style/csslibrary/item/css_oval_buttons/ How can I do this with a button instead of a link??? Is there a method or property which will tell me if the above div has visable scrollbars? I need to resize some elements based on whether the scroll bars are visable or not. I don't want to have them visable all the time, only if needed. I have designed one page. I am getting correct behavior in IE but there is some problem with Mozilla. Here is the code sample: <DIV class=ColumnHeader><SPAN class=noSort style="WIDTH: 6%; TEXT-ALIGN: center"><input type=checkbox id=chkSelAllAvail value="" name=chkSelAllAvail></SPAN> <SPAN style="WIDTH: 20%">Year</SPAN> <SPAN style="WIDTH:36%">Type of Report</SPAN> <SPAN style="WIDTH:24%">End Date</SPAN></DIV> I have attached both screen shots of IE and Mozilla. Can anyone help me ?? Hello. I'm trying to avoid using the <div style="clear:both"> fix for keeping elements from floating outside of their containers in IE7. Here's the code that's working with that fix. I'd like to have a way to adjust the CSS so I can take that out. 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/global.css" rel="stylesheet" type="text/css" /> <link href="css/.css" rel="stylesheet" type="text/css" /> <title>A Beautiful Smile</title> </head> <body> <div id="wrapper"> <div id="banner"> <ul id="navigation"> <li><a href="">Home</a></li> <li><a href="">Help</a></li> <li><a href="">Contacts</a></li> </ul> <img id="logo" src="images/global/logo.jpg" alt="Company Logo" /> <div style="clear:both"></div><!--Prevents img changesmile.jpg from going outside banner in IE7 --> <img id="changesmile" src="images/global/changesmile.jpg" alt="Learn how we can change your smile." /> </div> <div id="footer"> </div> </div> </body> </html> CSS Code:
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, textarea
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
/* End CSS Reset, Begin Styling */
#wrapper{
margin: 10px auto;
width: 735px;}
#banner{
width: 100%;
height: 279px;
margin: 0px auto;
background: URL('../images/global/banner.jpg') no-repeat;}
#navigation{
width: 200px;
margin: 50px 0px 0px 330px;
float: left;
}
#navigation li{
display: inline;
list-style-type: none;
float: left;
margin-left: 20px;}
#navigation li a{
color: #CCCCCC;
font-family: "Tahoma", "Verdana", sans-serif;
font-size: .70em;
text-decoration: none;}
#navigation li a:hover{text-decoration: underline;}
#logo{
display: block;
width: 180px;
height: 82px;
float: right;
margin: 0px;
}
#changesmile{
display: block;
width: 228px;
height: 75px;
float: right;
clear: both;
margin: 100px 60px 0px 0px;
}
I appreciate your help! Hi, Im using CSS, and have included the code in a separate .css file. The whole website uses DIVs and is displaying correctly in both I.E. and Firefox. Now, I need to generate a dynamic DIV using PHP, so I did this to test it out, Code: <div style="{ background: #00cc00; width:100%; height:100%;}">abc</div>
But the problem is that it displays correctly in I.E. but not in FIREFOX, all the attributes that I have specified within the style="{}" tag are NOT at all applied in FIREFOX. Only the text "abc" is displayed in firefox and the style, including the background colour is not applicable at all! Please tell me what Firefox is upto? Thanks! Your sisncerely, mbk, mbkweb. Hello everybody, I used the following line <td width="8" background="<?php print $image; ?>" height="15" style="background-repeat: no-Repeat"></td> and it worked well for IE, but in Mozilla the image wasn't displayed properly, so I used the following line for Mozilla: <td width="8"> <img src="<?php print $image; ?>" width="8" height="15" style="background-repeat: no-Repeat"> </img> but now the "style" property does not work, and there is a back ground repeat, how can I avoid the background repeat in Mozilla? What i want to do is have a block set to the exact width and height that i want. I am trying to find it on w3schools and cant seem to get anywhere. When i use the code below it works great, untill i enter text to it. i want the height of the block to be 15 pixels, the text is set at 12 in the external stylesheet. When i add the text it makes it about 25px or something... does this have something to do with clip? Line-height also makes no differences. This is my attempt at getting rid of my smaller tables Code: <div style="position: absolute; left: 0px; top: 200px; background-color: #ECDC74; width: 140px; height: 15px; padding: 0px;"> <h5 class="left">s</h5> </div> stylesheet Code:
h5
{
padding: 0px;
FONT-WEIGHT: bold;
text-align: center;
font-size: 12px }
.right {text-align: right }
.center {text-align: center }
.left {text-align: left }
here is the basic idea of the site Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3 Kingdoms-Tester</title>
<link rel="stylesheet" type="text/css"
href="stylesheet1.css" />
<title></title>
</head>
<body>
<div style="position: absolute; left: 0px; top: 0px; background-color: TRANSPARENT; padding: 0px;">
<!--A very large mess of tables in here for my navigation bar at the top-->
</div>
<!--I want to have a lot of blocks (such as below) in here i was hoping to do with absolute positions and place them where i want. Its basically a multi columned theme with a bunch of sections-->
<div style="position: absolute; left: 0px; top: 200px; background-color: #ECDC74; width: 140px; height: 15px; padding: 0px;">
<h5 class="left">s</h5>
</div>
<div style="position: absolute; top; 2px; left: 617px; width: 147px; height: 30px; background-color: transperant; padding: 0px;">
<h5 style="padding:0px;margin:3px;">Click here to join the community!</h6>
</div>
</body>
</html>
thanks for any help! |
|||||||