|
CSS - Css Display
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 Similar TutorialsI'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 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? 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 Hi, I have this code and i need some text next to the drop down. I am attaching the image how it looks like the text " Hold Ctrl key 4 multiple " is next to the drop down and it sticks to the drop down i need some space between the text and drop down and its not working here is the css code The text scorlls next to the drop down and i want the space to be uniform on the 3 lines where the text scrolls down also can i have Hold Ctrl key 4 on one line and then multiple on the second line thank you princecharles Code:
.credfont
{
font-weight:bold;
font-size:12px;
padding:0px 0px 0px 4px;
color: #f00;
}
<tr class="oddrow">
<td class="lbl" width="152">Subjects: </td>
<td width="170"><span style="float:left;"><select name="Subjects" id="Subjects" multiple="multiple" size="2">
<option>Maths</option>
<option>Science</option>
<option>PT</option>
<option>Arts</option>
</select> </span> <span class="credfont">( Hold Ctrl key 4 multiple )</span>
</td>
<td class="lbl" width="92" > Class: </td>
<td colspan="2"> <input type="text" class="writein" name="class" id="class" size="30" value="">
</td>
</tr>
Hello, I am trying to make a website www.jazzsurlaplage.ch/2007/home.php (sorry for the french script over there) Here is the issue : One Firefox or IE 7, the partners box appears to the right side of the page, whereas on IE 6, it appears way at the bottom. you can check out the html source on the page itself (I've written it, not generated, so it must be pretty easy to get) and the css is over here : www.jazzsurlaplage.ch/2007/style.css Here is the part in the file where I define the side box : Code: /*===========SIDE NAVIGATION==================*/
#sideinfo{
left:600px;
width:200px;
position: relative;
margin-top:3px;
margin-bottom:0px;
}
.sidebox{
margin:0px 0px 0px 0px;
padding:15px 0px 0px 0px;
width:200px;
height:30px;
position:relative;
background:transparent url(images/sidehead.jpg) left top no-repeat;
}
.sidebox .sidebody{
position:relative;
padding:0px 10px 0px 10px;
background:url(images/sidebody.jpg) left top repeat-y;
margin-bottom:0px;
text-align:center;
}
.sidebox .sidefooter{
position:relative;
height:30px;
width:200px;
margin-top:0px;
background:url(images/sidefoot.jpg) left top no-repeat;
}
/*============================END SIDE BLOCK===========================*/
/
Here is the part in the html file where I insert the box : Code: <? //sidebar echo '<div id="sideinfo">'; echo '<div class="sidebox">'; echo '<div class="sidebody">'; echo '<img src="images/partenaires.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/arg.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/chatnoir.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/coheran.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/heineken.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/semeuse.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/jardinnerie.jpg" />'; echo '<br />'; echo '<img src="images/partenaires/raiffeisen.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/aurelys.jpg" width="130"/>'; echo '<br />'; echo '<img src="images/partenaires/mb.jpg" width="130"/>'; echo '</div>'; echo '<div class="sidefooter"></div>'; echo '</div>'; echo '</div>'; ?> What do I do, and where can I get more info on these kind of issues ? Thanks, Manojo Hi Everyone, I can't get my background image to display in Firefox the html looks like this: Code: <div id="textBack"> <div id="leftSide"></div> <div id="centerText"> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br </div> <div id="rightSide"></div> </div> Here is my CSS: Code: #textBack
{
background:url(images/textBack.gif);
background-repeat:repeat-y;
width:902px;
height:inherit;
position:relative;
}
#leftSide
{
width:180px;
position:relative;
float:right;
}
#rightSide
{
width:180px;
position:relative;
float:right;
}
#centerText
{
width:540px;
position:relative;
float:right;
}
Can anyone tell me what it is I'm doing wrong? I would greatly appreciate it. Thanks. Hello, my code works fine on my MAC browsers, but on my PC, IE6 browser, the buttons underneath the body of the page don't align. Here's the site: http://www.caillouette.com/Utilitrek/three/ Here's the CSS:http://www.caillouette.com/Utilitrek/three/style2.css Can someone tell me if this site looks okay in IE 7? I can't download IE 7 because of some technical quirk on my computer. And if they don't align in IE 7, please tell me what I should do. thanks -Sean 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 Hi There - Am stumped. Everyone I know is stumped. We're using the cms Drupal on www.digitaldollhouse.com and whenever we update the site from svn, ie decides it doesn't want to display the page. White screen of death. Notice: ie cannot display this page. It occurs on all flavors of ie. It used to be solved by clearing the caches. Not anymore. The original authors of the html/css monster are contractors long since by the wayside. Another themer has taken over and she is very good, but had to work around some serious badness. She's also stumped. That leaves me. I'd be grateful for any ideas on how to even start to troubleshoot this bug. Hi all. I got problem with display content in IE 6 and 7, It throws the content totally on left side, while in firefox its on center, like it should be. I think problem could be he #countrydivcontainer { text-align: left; margin-top: 0pt; margin-right: auto; margin-bottom: 0pt; margin-left: auto; width: 965px; color: #666666; clear: both; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; } Unfortunately i dont know how to explain the problem without the url to really see it Can someone help? 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]-->
not sure where to go with this. I'm not a great CSS developer by any means. but this is killing me. I'm working on two sites. I've created a login box that changes to member links once logged in. but the box display is not working correctlly. In FF it looks right. but in IE it adds a space below the h2 line. I've set margin and padding to 0 on this and it doesn't seem to matter. Any thoughts? FYI this site is in dev. if you click the member pages you'll see data. on the filter pages there are NSFW words in the list. I've not yet set the permissions so that guests can't see the sample data. the site URL is: 15.e-referrer.com/cms Any help is greatly appreciated. EDIT: Sorry, had to remove the hyperlink code. can't post urls as a new user. 3 years later This is yet again another mysterious issue I am having with CSS and the notorious Internet Explorer. I have two divs fashioned into boxes. One is floated to the left the other is floated to the right. The height looks fine in FF but when you look at the bottom border of said 'boxes' the one on the right draws up sooner than the one on the left (when viewed in IE). The CSS definitions for both divs have the same height specified. Any help at all is very appreciated. http://www.ioforge.com/contact This work in FF. CSS Code:
a:link.butt{
display: block;
width: 6em;
padding: 0.2em;
background-color: red;
border: 1px solid black;
text-decoration: none;
text-align: center;
}
HTML Code: <a href="#" class="butt">My butdfsf fd fds fds sd fdsaf aaton</a> This is bugging me to death. I cannot get these to top elements to display inline. If anyone could take a look in firebug to see element and related css applied and tell me whats wrong. The page is: http://travelmagoo.com/index.php?option=com_resource&controller=article&article=384&category_id=201&Itemid=0 at the top header there is a title and to the right there is an image. I would like the image and title to be on the same line but everything i do will not let me do this. any ideas? |
|||||||