|
CSS - How Compatible Should We Make Our Css Code?
What percentage of browsers are running on something below NN 6.0 and I.E 4.0?
Similar TutorialsJava Script:: Code: <script type=text/javascript>
// identify Netscape or MSIE
var isIE = (document.all) ? true : false;
var isNS = (document.layers) ? true : false;
function toggleT( objName, swi ) {
if ( isIE ) {
( swi == "s" ) ? eval("document.all." + objName + ".style.visibility='visible';") :
eval("document.all." + objName + ".style.visibility='hidden';");
}
else {
( swi == "s" ) ? eval("document.layers['" + objName + "'].visibility='show';") :
eval("document.layers['" + objName + "'].visibility='hide';");
}
}
</script>
HTML code: Code: <span id="course" onClick="toggleT('divtag58','s')" onMouseOut="toggleT('divtag58','h')">Designing w/Computers I</span></font></strong><span id="divtag58">
An introduction to the computer as a design tool. Created for people just beginning to apply their design skills to a computer. In a hands-on lab over two quarters, the software application Freehand (vector based program) for illustrative techniques is introduced. Discussions on a variety of related topics, such as design concepts, other software, computer needs and misconceptions. Previous design experience is necessary. (0688-271 or equivalent).<font color="#666666">Credit 3</span>
works fine in internet explore but not in Mozilla This was my first css project done a couple of months ago, and I recently added some functionality to finish it off. A quick check in different browsers and I find its hosed in Mozilla and Opera. Usually this wouldn't be a problem, and normally requires some light adjustment, but this page is just hosed. Opera doesn't even react to adjustments I make. I've got 6 hours into trying to make this cross browser, and nothing works. Even link classes that work in IE/Opera, are completely ignored in Mozilla. I'm assuming if you look at the source you'll be able to see whats going on. I'm trying to break the formatting out of my page to post here for ease of reading, but its taking me some time. The desired effect is acheived in IE. Any opinions, or help would be appreciated! Is there Opera compatible code for filter:alpha or -moz-opacity? I need some really rediculous link styles, like all of the cool fading/pixelating ones that work on IE - but I can't find any for Firefox. Does anyone know if they exist, or where to find them? Here's some code that crashes Internet Explorer. On the surface it seems it should work, but down the browser goes!
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>list test</title> <style type="text/css"> .list { background: url('http://www.geocities.com/coffee_breath_23/images/Picture1.gif'); } .list li::first-letter { margin-left: 1px; } </style> </head> <body> <div class="list"> <ol type="1"> <li>Th<span>is is a test list.</span></li> <li><span>This is only a test.</span></li> </ol> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Notice the following details: Containing element with background set Contextual :first-letter selector :first-letter is given margin Element is <li> First and/or second letter wrapped in <span></span> tags I tried it with padding instead of margin, and it did the same thing: css Code: Original - css Code .list li::first-letter { padding-left: 1px; }
.list li::first-letter {
I've tested this thoroughly. All the details must be present to trigger a shutdown. But when I tried adding layout to the <ol> element, the problem went away: css Code: Original - css Code .list ol { zoom: 1; }
.list ol {
Open up these three test files in IE, and you'll see what I'm talking about. The first two links will shut down the browser, so be very careful with them. If you're working on anything in another IE window, all windows of IE will shut down and you will lose your work. The third link is safe, though. http://www.freewebs.com/desertowl/listtest.html http://www.freewebs.com/desertowl/listpad.html http://www.freewebs.com/desertowl/listlayout.html Edit: I just discovered that the bug is not just triggered by a <span> inside an <li>; see below. Hi... Can any body tell me how to make effect mentioned below. http://forums.devshed.com/archive/t-175080 Basically i am a designer, and i am new to programming. When the above mentioned page will open, there are links in blue color i.e "Firewall", "Backup", "internet", "Viruses", "VPN", etc etc. I need this type of effect for my web site, can any body tell me how to make this.... Thanks Hi, I'm working on redeveloping my site using CSS (learning CSS as I go), and for the most part it's fine. I'm having a bit of a problem getting my footer (containing links to Terms & Conditions, copyright notice, etc.) to display at the bottom of the page. I have a div called MainSection as follows : #MainSection { position: absolute; border: 1px solid #000033; top: 100px; left: 1px; width: 777px; z-index: 0; } Within that, I have 3 divs - WhereYouAre, LeftPanel and MainBodyContent, as follows: .WhereYouAre { position: absolute; width: 500px; top: 8px; left: 205px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; text-decoration: none; color: #000033; } #LeftPanel { position:absolute; top: 3px; left: 3px; width: 190px; border: 1px solid #000033; } #MainBodyContent { position: absolute; border: 1px solid #000033; padding: 0px 5px 5px 5px; top: 5px; left: 200px; width: 567px; z-index: 0; } Then at the bottom, after the closing </div> for the MainSection, I have my div called BottomNav: #BottomNav{ position:inherit; margin:10px; border-top: 1px solid #000033; border-bottom: 1px solid #000033; width: 780px; left: 0px; } The BottomNav keeps appearing at the top of thepage instead of at the bottom - I've tried different values (inherit / relative, etc) to see can I get something to work, but no good so far... and I can't set the positon to absolute as the location of the BottomNav depends on the length of the MainSection. Thanks a lot for any suggestions, J. Can someone show the the CSS to make the unordered list to the right of the picture display the same way in IE as it does in FF? HERE is my link. Many thank yous from the CSS noob. I have decided that it would be easier to make 2 seperate div tags so I wouldn't have to deal with the issues on margin and padding that IE barf all over at. So, what I'm going to do is to make the 2nd <div> to overlap the 1st <div>. So, what the property or attribute that I can use to make it the overlapping work that work for most web browsers?? Thanks, FletchSOD http://www.webpagedesignrus.co.uk/DECS Code: #container {
margin: auto;
width: 100%;
display: block;
text-align: center;
height: 100%;
}
#middle {
text-align: left;
margin: auto;
width: 600px;
height: 100%;
background-color: #FFF;
}
#main {
margin: auto;
background-color: #FFF;
border-left: solid black 1px;
border-right: solid black 1px;
width: 650px;
height: 100%;
cell-padding: 0px;
cell-spacing: 0px:
}
I can't get the white part to be 100% height... I need it to go to the bottom of the page... Please help... I'm still new to the CSS layout deal, but I'm giving it what I can, and I felt I was getting close until I looked at the page in IE and then ran it through some validation First the validation This is my page so far: Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="layoutTest.css" />
<style type="text/css" media="screen">@import "layoutTest.css";</style>
<style type="text/css">
<!--
#ctNav {
position:absolute;
height:auto;
min-height:30px;
margin:0px 0px 0px 144px;
border:0px;
background-color:68657A;
z-index:3;
width: 100%;
}
#ctNav ul {
padding: 0;
margin: 0;
}
#ctNav li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
-->
</style>
</head>
<body>
<div id="localNav">
<a href="http://www.codetailor.com"> <img height="66" alt="Alt Text" src="#" width="144" border="0" /></a>
<ul><li>localMenu</li></ul>
</div>
<div id="ctNav">
<ul><li><a href=""><img height="30" alt="Alt Text" src="#" width="223" border="0" /></a></li></ul>
</div>
<div class="content">
<h1>Heading 1</h1>
<p><img src="#" width="288" height="288" align=right hspace="12" alt="picture" ></p>
<h3>Heading 3</h3>
<p>This is some text</p>
</div>
</body>
</html>
I have bolded the part that will not validate when I run it through the http://validator.w3.org/ validator. if this is the case, how do I add styles. It won't allow me to put them on the page or in another file (both are shown here by the way, only one way will be used) the second part is the fact that without having the #ctNav styles on the page I get a little extra on the bottom of my pictures. I can do a screenshot of this if it would help, but if you run it with and without these tags in there you will see for yourself. these are the styles contained in the external file: Code:
body {
margin: 0px;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:24px;
text-align: center;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:0px; text-indent:30px;}
.Content>p+p {text-indent:30px;}
/* All the content boxes belong to the content class. */
.content {
position:absolute; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:36px 10px 20px 165px;
border:0px;
background-color:white;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#localNav {
position:absolute;
width:auto;
min-width:120px;
margin:0px auto 0px 0px;
border:0px;
background-color:3D3B7C;
z-index:4;
height: 100%;
}
#localNav p {margin:0px;}
#localNav ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
#localNav li {
margin: 0px;
padding: 1px 0px;
border-bottom: 1px solid black;
width: 100%;
display: block;
text-indent: 4px;
}
#localNav li.selected {
margin: 0px;
padding: 1px 0px;
border-bottom: 1px solid black;
width: 100%;
display: block;
text-indent: 4px;
background-color: 67657A;
}
#localNav li:first-child {
margin: 0;
padding: 1px 0px 1px 0px;
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
color: #000000;
text-align: center;
background-color:#67657A;
font-weight: bolder;
text-indent: 0px;
}
#ctNav {
position:absolute;
height:auto;
min-height:30px;
margin:0px 0px 0px 144px;
border:0px;
background-color:68657A;
z-index:3;
width: 100%;
}
#ctNav ul {
padding: 0;
margin: 0;
}
#ctNav li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
}
finally, when I look at this in IE, the localNav is taking over the whole screen, I assume that it is because of one of the tags, but I can't see it. Point it out for me if you know. thanks for your time. Sorry for the boring thread. What I am basically trying to do is make a grid of numbers (its for a small calendar), and I want to do it using css. Would appreciate any suggestions for the best way to go about it. (an expample is the HTML code that it would be) Code: <table width="150" border="1"> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr> <tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr> <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr> <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td><td>36</td></tr> </table> I am not to bad at the css thing but this got me foxed... I started of by indenting the margin of each <td> as <div> and appling a more negative of a top margin for each one... it started to get confusing! Cheers, Hi guys... I'm fairly experienced at webdesign, but I never actually used css for the *entire* design before (besides on one or two unfinished sites that came out badly). I was wondering if anyone could help me out designing the basic layout with css, and I can probably handle the rest. It would be much appreciated! Hi, I'm looking for a javascript technique that will allow me to check whether all of my external files (CSS, JS, XML) have been successfully downloaded before allowing other scripts to be run in the page. I can accomplish this for script files by setting a global variable in the main page and having the external script reset that variable when it is loaded, but I dont know how to do it for CSS files (or others). Any ideas? W. Anyone knows how to make the standardized border as the attached file ? cheers. Hi I have a page which has a header, footer, nav bar and content area using CSS and works great in IE8, FF, Chrome and Safari, and almost works in Opera. Although I have tried to avoid it, my boss wants the page to work in IE6 as we have corporate clients still using it, and I CANNOT figure out how to arrange it without fixed sizing! Can anyone help? 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><title>
Untitled Page
</title>
<style type="text/css">
#test div {
border:solid 2px red;
position:absolute;
}
#head {
height:100px;
top:0;
left:0;
right:0;
}
#nav {
left:0;
top:105px;
bottom:105px;
width:200px;
}
#foot {
height:100px;
bottom:0;
left:0;
right:0;
}
.scroll {
top:0;
right:0;
left:0;
bottom:0;
margin-left:205px;
margin-top:105px;
margin-bottom:105px;
}
</style>
</head>
<body>
<div id="test">
<div id="head"></div>
<div id="nav"></div>
<div id='x40702f5b28_scroller' class='scroll' style='overflow:scroll;'>
<div id='x40702f5b28' style='width:1024px;height:768px;position:relative;'>
</div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
The red borders are purely so I can see where the DIVs are and don't need to be in the final version. Any help would be greatly appreciated... SW. A column on the left side of the page 200 pixels wide (reserved for a vertically orientated textbased navigation bar). The background colour of this area should be black. An area to enter content that is 800 pixels wide with a white background. Any help appreciated. Basically on this page here -> http://www.prxa.info/area51/profile.php?info=1 The copyright molds into the right column and i wish it to stay below both the left and right, how would i go about doing that? I need to create a 2 column layout as in the link below: http://css.maxdesign.com.au/floatutorial/tutorial0816.htm However, I will not always know whether or not the contnet in the left or right will be longest. As it is in the design above they recommend to put the border on the left content if the left side is longer. But I will not always know which is longest, so I can't just change the border in the CSS. Is there anyway to create a layout like the above link that has a border separating the two columns that will resize to the longest column, no matter which side has longer content? Any help is much appreciated! Hi everybody, my site is becoming more and more what i wanted it to be. I thought making it printerfriendly would have been easy, but i encounter some strange problems. http://users.pandora.be/jef_patat/index.htm First of all: there is a big box at the top of the page, it is there for some reason because all browsers i tested it with show the box. I made the body background color yellow for better visualization. Second: if i try to print it out with netscape or firefox the both leave some text in the area between two pages, so when the print some text is missing. I hope a solution can be found, many thanks, Jef Patat |
|||||||