|
CSS - Unable To Display Css
Hi there,
thanks in advanced for any help. I have an xls file that is diplayed in my index page... however, when I view the index.htm locally is applies to the css style to my xls file perfectly. In both IE and Firefox.. however when I upload the file to my server IE displays it correctly, however FireFox doesnt. XSL file Code: <?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
<xsl:template match="/">
<html>
<body>
<link media="all" rel="Stylesheet" type="text/css" href="css/schedule.css" />
<div class="stitle">Schedule</div>
<xsl:for-each select="SCHEDULE">
<div class="date">
<xsl:value-of select="DATE" />
</div>
</xsl:for-each>
<div class="schedule">
<xsl:for-each select="SCHEDULE/SHOW">
<div>
<div class="stime">
<xsl:value-of select="STIME" />
</div>
<div class="etime">
<xsl:value-of select="ETIME" />
</div>
<div class="title">
<xsl:value-of select="TITLE" />
</div>
<div class="description">
<xsl:value-of select="DESCRIPTION" />
</div>
<br />
</div>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
any ideas? and also it doesnt display this part of the xsl file on the web at all. Code: <div class="stitle">Schedule</div> thanks steve Similar TutorialsI'm struggling to target some headings in ie 6. They need more padding on the top as they look slightly chopped. www.efficient-heat.net/services The headings are Power Flushing and Condensing Boilers I've had a look at them in internet explorer developer toolbar and i'm seeing several paddings being applied. This suggests a conflict in the cascade. I've given the styling for the Power flushing header rule !important but that doesn't work. The headings look ok in ie 7 and ff3 How do I target these titles for styling in ie6? I have a dropdown menu that was generated using .net When I try to apply some .css style tags: .menuitem { background-color:#fff; color:#ffffff; text-align:left; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; padding: 2px 8px 3px 10px; margin:0px;} It works BUT, if I add: border-top attribute I get a double border on all the other items in the list but the first. Is there something I can do? I had thought about trying to create a .css tag for the first item in the list with it's own attributes. Any ideas? Thanks! Stephen Hi All, Been a while since I have been here, been doing other jobs in place of website design sadly! Something I enjoy a great deal! Anyway, I am in the process of making a new website and I have discovered overlays - what a great idea. They look fantastic. Now I have designed an overlay for my site: http://www.wellandpower.net/website2/index.php The bottom link on this page makes an overlay appear with a new specification sheet in it. The dotted grey background (soon to be changed to another design) is held in the #overlay div, the specification sheet is housed in the '#overlayholder' div. The overlay div has a property of text-align: center; - but the overlayholder div is not aligning to the centre. I have posted the CSS of the two elements below. It works in IE7, but not in FF. Secondly, when the overlayholder appears and content is added to it, the overlay DIV does not stretch in either browser, why not? I found this strange. CSS Code: Original - CSS Code #overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align: center; z-index: 1000; background-image:url(/images/checkerboard.png); } #overlay #overlayholder { margin-top: 50px; padding: 10px; width: 850px; text-align: center; background-color: #FFFFFF; }
#overlay {
Any help greatly appreciated. Hello, I'm an amateur with CSS, and would appreciate if you could take some time to help me out! I have a CSS rule to render all bullets in my page with a different icon, including on the sidebars. But there's one single list (a secondary navigation bar) where I do not want any bullets. I am trying to override it, but am unable to. I'd be glad if you could review my CSS and tell me where I'm going wrong. Thanks a Ton! Code:
.sidebar li {
border-top:dashed #cccccc 1px;
}
.sidebar ul li {
padding:0 0 0 1.5em;
list-style-type: none;
list-style-image: none;
background-image: url(img/menu-leaf.gif);
background-repeat:no-repeat;
background-position: 0.3em 0.6em;
}
This is my navigation block Code:
#navigation-secondary a {
display:block;
color:#ffffff;
}
#navigation-secondary a:hover {
background-color:#369; /* to change color when hovered over */
}
The following method to override it doesn't work Code:
#navigation-secondary , #navigation-secondary ul,
#navigation-secondary ul li, #navigation-secondary a {
list-style-type:none;
list-style:none;
}
ul.secondary-links li, ul.secondary-links ul li {
background-image:none;
border-top: none;
}
I should mention, the top border has been overridden, but not the background image. My html code snippet (rendered via php) is here Code:
<div class="sidebar" id="sidebar-left">
<div id="navigation-secondary">
<ul class="links secondary-links">
<li class="menu-138 first"><a title="Link1 site" href="/link1">Link1</a></li>
<li class="menu-139"><a title="Link2 site" href="/link1">Link2</a></li>
<li class="menu-140 last"><a title="Link3 page" href="/link1">Link3</a></li>
</ul>
<div style="clear: both;"/>
</div>
I'd be glad if you could help me out. Thanks! Hi, I written some CSS it works fine except in IE6 the visit page highlight block is not covering the entire height of my menu bar, here is the code: Code: /** Style for menu starts here */
#menu {
width: 800px;
height: 50px;
margin: 0px auto;
background: #264779;
}
#menu ul {
margin: 0px;
padding: 0 0 0 10px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
padding: 14px 30px 10px 8px;
text-decoration: none;
color: #FFFFFF;
}
#menu a:hover {
color: #D7D7BD;
}
body#home a#homenav,
body#errorlogs a#errornav
{
color: #fff;
background: #FFC109; /**Yellow*/
font-weight: bold;
margin: 0px auto;
padding: 14px 20px 10px 20px;
text-decoration: none;
}
What is happening here is: the visit page highlight the respective menu but height of the menu block is 10px shorter than the height of the actual menu. Hey all, please check this page: http://www.trshady.com/eminemdownloads/ You'll see for floated grev divs. These are working well but the red sentence underneath is not adding margin like it should and it seems the block element is starting in line with the 1st floated div when it shouldn't as the width is too large. I'm unable to use clear as that would place the red sentence below the left hand menu which is floated.Any idea what I could do here? The only solution I see is to wrap the four boxes within a div and add a height larger then all boxes, but there must be a straight forward method. Cheers I have created a .css tab set and wish to move the tabs to left and reduce the white space before the first tab. For some reason, I just don't see it. Any help would be greatly appreciated. Thanks! Here is a link to the sample page I'm playing with: http://www.rustbug.com/mmtest/tabs.html Here is my .css: Code:
body {
margin:0px;
background-color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;}
p {
margin:10px 10px 10px 10px;
line-height:140%;
color:#333333;}
#menu{
margin-top:50px;
width:744px;
height:20px;
z-index:1;}
#menu ul {
list-style:none;}
#menu li{
float:left;
background: url(../images/rect_tab_notselected.gif) no-repeat;
height:20px;
width:148px;
text-align:center;
line-height:20px;
vertical-align:bottom;
font-size:12px;
padding-left:4px;}
#menu a {
text-decoration:none;}
#menu li.selected {
position:relative;
top:1px;
background: url(../images/rect_tab_selected.gif) no-repeat;
background-color:#fff;
font-weight:bold;
height:20px;
width:148px;}
#menu li.selectedRound{
position:relative;
top:1px;
background: url(../images/curve_tab_selected.gif) no-repeat;
font-weight:bold;
height:20px;
width:148px;}
#menu li.notselectedRound{
background: url(../images/curve_tab_notselected.gif) no-repeat;}
#menu_content_container {
width:744px;
border:1px #CCCCCC solid;
z-index:2;}
Here is my 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=utf-8" />
<title>Untitled Document</title>
<link href="css/tabs2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="tabs.html">My Selections</a></li>
<li><a href="tabs.html">Date-based Option</a></li>
<li><a href="tabs.html">Risk-based Option</a></li>
<li class="selectedRound"><a href="tabs.html">Create My Own</a></li>
</ul>
</div>
<div id="menu_content_container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<!-- <input type="button" value="Previous" class="btn"/><input type="button" value="Submit" class="btn"/>
<p class="btn">hello</p> -->
</body>
</html>
I have a custome bullet for an LI...my issue is...when this displays, the bullet displays at the top of the line height. Is there a way to adjust this so that the bullet appears in center of the line height? Hi, I have the following horizontal navigation bar: Code: ul#List
{ list-style-type:none;
margin:0;
padding:0;
width:956px;
font-size:13px;
font-weight:bold;
}
ul#List li
{ display:inline;
}
ul#List li a
{ text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#FFFFFF;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#List li a:hover
{ background:#ADFF2F;
color:#000000;
}
<ul id="List" style="position:absolute;left:0px;top:90px;">
<li><a style="width:91px;" href="">something something</a></li>
............ </ul>
The trouble is when the window is resized (maximized or minimized) at certain points the last list overflows and appears on the next line. How can I prevent this, that is, keep the list on one line when the window is resized. Note I have tried using position:relative and putting the above inside <div> but neither solution worked. If the above code cannot be modified I wonder if someone has a horizontal navigation bar that does what I want. I will be very grateful for all help. I've been seeing people using ul and li tags to make their menus in css. So I've started trying to do the same, here is an example. But obviously here, the buttons are not displaying inline. All of the styles are within the page code itself. I've got a display: inline style on the li tag, but it's still not working? How can I get this to work or is there any other way to get a ul li menu to display this way? Could someone enlighten me why the page in the following URL functions perfectly in both IE6 and FF and yet, I seem to be totally unable to get the darn thing working locally? I am trying to avoid JavaScript and this looked like a very clean way of hiding and revealing menu items. I don't speak Japanese so I don't understand the text on the page either. http://www.amy.hi-ho.ne.jp/staka/hp/dhtm/s_disp.htm Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks Hi guys, Just a quickie , I was looking at a site I produced in Netscape Navigator 7 and noticed a problem. I have a left hand nav that expands to show a sub Nav on mouse over. When moving your mouse off the menu item onto another one the previous menu closes (unless it's the page your looking at) Simple right? - well I noticed in NN7 that the display:none; I use to close the menu does not seem to work. No error, just doesn't work. Does display:none; not work in NN7 then? Is there a way arround it? Cheers, Daz Hey all I'm having a little trouble with my web site, which I have been attempting to make "css-based" and "tableless." The problem that I am having is that there are quite a few small but frusterating differences between how the page displays in IE and Mozilla Firefox (i tend to beleive that ie, the non-standards browser is wrong). Anyway, to the problem. If you view this site: http://trinity.killagraphix.com/index.php Css: http://trinity.killagraphix.com/theme.css (i didn't want to paste the whole file as it is quite large) In Internet explorer, you get a small margin between the Header image, and the rest of the content. This is not here viewing the same page in Mozilla. Also, in both browsers the menu background image is slightly above the center of the line. I think this is because the image is not as big as the line size, is there a way to make the image (which is a css background property) appear vertically-aligned to the center? Thanks in advance, sorry for the post length I need some assistance getting my site menu to display correctly on FF. It displays fine on IE. You can see an example of the page he http://www.gallery.vividusphoto.com. If viewed in FF, the menu table is touching the logo. In IE, the menu is aligned to the right. If I do an align="right" the "under construction" bar goes up under the logo/menu in FF and the menu is moved to the correct position all while IE is unchanged. Any help is greatly appriciated. Code:
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #333333;
}
.vividus #container {
width: 46em;
margin: 20px auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
.vividus #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #333333;
height: 30em;
}
.vividus #headerContent {
width: 46em;
text-align: right;
color: #CCCCCC;
}
.vividus #footerContent {
width: 46em;
padding: 10px 0 0 0;
text-align: left;
color: #CCCCCC;
font: 75% Georgia, "Times New Roman", Times, serif;
}
.vividus #menu {
width: 30em;
border: 0;
margin: 15px 0 5px 0;
text-align: right;
font: 75% Georgia, "Times New Roman", Times, serif;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
.login {
background: #000000;
}
.login a:hover {
text-decoration: none;
color: #999999;
}
.newsBanner a:hover {
color:#FFFFFF;
}
.vividus #newsBanner {
background: #666666;
padding: 7px 15px 7px 5px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #CCCCCC;
}
.vividus #realContent {
background: #FFFFFF;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 15px 10px 15px;
}
.vividus #realContentHome {
background: #666666;
margin: 10px 0 0 0;
height: 30em;
padding: 10px 10px 10px 10px;
}
.vividus #bodyHeadline {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
}
.vividus #bodyText {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
}
.vividus #loginForm {
padding: 5px 0 5px 0;
border: 1px solid #000000;
}
.vividus #bodyHeader {
font-size: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
}
.floatright {
float: right;
margin: 10px 0 10px 10px;
}
.vividus #imgAbout {
height: 30em;
background: top right no-repeat url(../images/about_img.jpg);
}
.vividus #bodyHeadlineAbout {
color: #000000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.vividus #error {
color: #FF0000;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: .8em;
padding: 10px 0 0 0;
width: 35em;
}
.green {
background:#333333;
margin: 0px 6px 6px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:14px;
color:#FFFFFF;
font-size:12px;
font-family:Georgia, "Times New Roman", Times, serif;
margin-right:10px;
display:inline-block;
text-decoration:none;
}
.login2 {
width: 200px;
font-size: 1.1em;
font-family:Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
color: #102132;
border: 1px solid #284279;
}
Hello all, I feel like such a dumb a$$ for not figuring this out... I have a div with ID head and width 100%; In that div there are 4 elements, 2 images and two header ( h1 and h2 ) elements. The two gifs are positioned absolutely one top:0;left:0; and one top:0;right:0; The parent div is set to min-height & height of 160px; The height of the images. In firefox they display where you would expect them, top right and left corners. In ie 5,5.5, 6 and 7 they just don't display at all. Here is some code: CSS Code: Original - CSS Code #head{ text-align:center; clear:both; width:100%; min-width:100%; max-width:100%; min-height:160px; height:160px; } #img1{ position:absolute;top:0;left:0; } #img2{ position:absolute;top:0;right:0; } #head1{ clear:none; width:100%; min-width:100%; max-width:100%; } #head2{ clear:left; margin:0; width:100%; min-width:100%; max-width:100%; }
#head{
HTML4strict Code: Original - HTML4strict Code <link type="text/css" rel="stylesheet" href="default.css" /> </head> <body> <div id="head"> <img id="img1" src="img1.gif" alt="an animated gif"> <h1 id="head1">h1</h1> <h2 id="head2">h2</h2> <img id="img2" src="img2.gif" alt="an animted gif"> </div> <link type="text/css" rel="stylesheet" href="default.css" /> Edit: Nevermind, I fixed my problem by working through each issue that the W3C validation service gave me, and fixing each one. It works in Internet Explorer now. Thanks for your time anyway. Peace, Pete Zaria. I'm working on a new site, and having trouble getting the CSS to work with IE7 (big surprise), it works fine in Firefox (big surprise). You can see the site he http://www.gocubit.com CSS he http://www.gocubit.com/styles.css IE6 stylesheet he http://www.gocubit.com/ie.css The problem is very simple, so let me explain what I have setup, and what is happening. I have 4 backgrounds I want to display, in the following containers: body - this contains a tiling wall texture #outerWrapper - this contains a small non-repeating bg image that puts graffiti in the upper right corner on top of the wall bg #innerWrapper - same as outerWrapper, but puts a graffiti bg in top left #contentWrapper - this div contains the main display area, and displays a vertically repeating paper background that should fill the screen from top to bottom (on top of the wall and two graffiti backgrounds) I've tried my best to get this to display right, but have one of two problems depending on how it is set up. In all cases, BODY and HTML are set to 100% height. SCENARIO #1 (same problem in FF or IE7): I set outerWrapper, innerWrapper, and contentWrapper to min-height: 100%. This doesn't extend the paper background all the way to the bottom on pages that don't fill the screen with content (see the CONTACT page). SCENARIO #2 (works in FF): I set outerWrapper, innerWrapper to height: 100%, and contentWrapper to min-height:100%. This actually appears to work on first glance (and does work in FF). But, if you go to a page with a lot of content (see the SERVICES page) where you need to scroll, what happens is that there is no paper BG in the area that is off screen. The content "below the fold", when scrolled to, has no paper BG. It's setting the height of the div to the screen height, filling in the BG, and any content below that height has no BG (only the wall BG in the body element). Code: html { height: 100%; }
body {
background-color: #8d7c51;
background-image: url(images/bgStucco.jpg);
font-size: 12pt;
margin: 0;
padding: 0;
height: 100%;
}
#outerWrapper {
background-image:url(images/bgStucco_tr.jpg);
background-repeat:no-repeat;
background-position: right top;
width: 100%;
margin: 0;
padding: 0;
min-height: 100%;
}
#innerWrapper {
background-image:url(images/bgStucco_tl.jpg);
background-repeat:no-repeat;
min-height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
Code: <body><div id="outerWrapper"><div id="innerWrapper"><div id="contentWrapper"> CONTENT GOES HERE </div></div></div></body> Any ideas on how to get this to work? I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td. I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td. I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's. i coudnt find the forum search feature...? but anyone help with wht i am doing wrong? much appreciated I have a page that seems to display well in most browsers except in IE 6 (and possibly below). The content that should appear in the right_sidebar is shifted to the bottom left of the page. Dreamweaver has shown a "three-pixel text jog" error. I have read several articles on the IE bugs especially the ones at positioneverything.com but I still can't solve my problem. This seems to be the suggested fix, but I apparently am not applying it correctly: Code: <!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#column, #right_sidebar { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
|
|||||||