|
CSS - Bolder In The Body Not Working Properly
Hi,
I'm using C++ to create a single .cgi script. I'm now trying to incorperate some more CSS. I have added this line: <style>body { font-family: times-roman; font-size: 16px; font-weight: bolder; }</style> Now sometimes it works and sometimes it doesn't. I will keep on clicking the refresh button and it is about 1 out of 10 that there are not any fonts on the page and the table sizes jump. Does anyone know why this is possibly happening? Mike Similar TutorialsNote: as a new user it would not let me use a link(url) Problem:when viewing in IE8 - the text looks grainy notes: Using this page as an example: fineprintnotes.com/bergincapital1210/about-us-bergin-co-difference -text looks smooth and easy to the eye when viewing in Firefox and Chrome -text looks smooth when using the "compatibility view" feature in IE8 - but want that look as a default for visitors -for example - when visiting other website using IE8 such as: savantcapital.com The text renders- when viewing in IE8- like Firefox and Chrome or in other words smooth and not grainy -i have the same font face as that site and not sure what a fix could be - read up on what possible fixes I could find on the internet - such as "emulate IE 7" tag for example on this page: url blocked -- Welcome to Internet Explorer 8 Readiness Toolkit Questions - has anybody had this issue? - i don't notice the savantcapital.com website defaulting to Ie7 (using emulate ie 7 tag - how does their text look cleaner than my website? same goes for morganstanley.com (as another example) - i find it hard to degrade the wesbite to fix the text issue- i am not sure if thats how to put it- but would like it to use a more DOM compliant browser like ie8 if it has option in stead of reverting to IE7 view. Any thought? or fixes? Thanks in advance. one other note: I tried to do screen shots but it wasn't communicating the issue - the images altered the drasticness of the difference - i feel - right now i have the website not emulating ie7 Jamie Hi there, I am trying to define the body text for all my pages using this, but it is not recognising it: Code:
body{
font-family: verdana;
font-size: 11px;
color: #000000;
line-height: 150%;
}
Have I got something wrong here?! O.k. I'm stumped... I have a gap about 5px at the top of my site in Opera 8.02 which reveals my background graphic and setting the top margin to 0px in both my body and wrapper div does nothing to solve it. It renders fine in FF 1.06 and IE6, and yes, everything validates fine. My Website My css file My gratitude ahead of time. [edit] Did a little deeper search and solved my problem. Opera uses padding as a default, not margins. So setting padding to: Code: body {
padding: 0px /*Opera hack*/
}
Removed the gap issue [/edit] I have googled it and searched through this forum as well. And found pretty much the same advice. However it does not appear to work for me. My CSS file has the following: Code:
body {
padding: 0;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #000000;
font-size: 12px;
line-height: 15px;
text-align: center;
}
.largeLink{
font-size: 14px;
}
.bodyTextSm{
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;}
div#pageContainer{
margin-top: 5px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
and my php file contains: Code:
<body bgcolor="#000000" onLoad="MM_preloadImages('/images/TopNav_r1_c1_f2_online_movies.gif','/images/TopNav_r2_c3_f2_online_movies.gif','/images/TopNav_r2_c4_f2_online_movies.gif','/images/TopNav_r2_c5_f2_online_movies.gif','/images/TopNav_r2_c6_f2_online_movies.gif')">
<?php include_once("GoogleAnalytics.php") ?>
<!--The following section is an HTML table which reassembles the sliced image in a browser.-->
<!--Copy the table section including the opening and closing table tags, and paste the data where-->
<!--you want the reassembled image to appear in the destination document. -->
<div id="pageContainer">
...
And I am not getting the page to center. What gives? I was looking for ways to make the layout work with header, body and footer that work in IE, Gecko, Safari, etc.. I thought I found a good solution via Google surfing and it looked great. Then I discovered that it doesn't have the "<!DOCTYPE ...>" tag, so I added it and now it is thrown out of wack in most browsers. Does anyone know of a valid css layout that would include the header, the body and the footer that work. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 0;
padding: 0;
}
#spacer{
height: 95%;
float: left;
width: 1px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}
#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#content{
padding: 30px;
border-width: 1px;
border-style: solid;
border-color: blue;
}
#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
border-style: solid;
border-color: red;
vertical-align: middle;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="spacer"></div>
<div id="contentwrap">
<div id="content">
<p>this is the content div</p>
<p> </p>
<p>more content</p>
<p> </p>
<p>and even more</p>
<p> </p>
<p> </p>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="footer">footer</div>
</body>
</html>
I thought I can do this but it doesn't really work as the footer doesn't go all the way down to the bottom when needed... Code: <div id="header"> .... </div> <div id="main"> .... </div> <div id="footer"> .... </div> Thanks, FletchSOD Hi there, I have just made a website using css to pop-out my menus, and they dont seem to work in safari, yet work fine in ie and firefox. The website is overload.net.nz, and the two pop-out tabs are the 'newsletter' tab, and the 'tips' tab. I have used css layers, and is wondering is that is the problem? And I dont have safari to test any changes in, does anyone know of a successful safari pc version yet? This code for my horizontal drop down menu works great in Chrome & Firefox but is shifted to the right in IE. I would like it to line up properly, like it does in Firefox & Chrome. Anyone have any ideas on how to make it IE compatible? Thanks! Here is the test webpage to see it live: artevaggio.com/test/slideshow_sample.html Here is the CSS source: artevaggio.com/test/artevaggio_style.css There also a snippet of CSS when you view the page source code. Thanks! Ok i have a header and it has a SWF file on it. WHat i want to do is put the links on the same SWF file to the side but to the top of it i.e. using Z-index? but i cant get it to work? CSS Code:
#header {
position:relative;
z-index:-1;
float:left;
width:100%;
clear:both;
}
#links {
border:1px solid black;
position:absolute;
z-index:100;
top:10px;
right:20px;
}
HTML Code:
<div id="header">
<object width="550" height="400">
<param name="movie" value="/resourcebank/images/Final_banner.swf">
<embed src="/resourcebank/images/Final_banner.swf" width="100% height="20%">
</embed>
</object>
<span id="links">
random links
</span>
</div>
Hi, I have the following code that all it does is list boxes under each other. Now between each box I set a margin of 10px. However in Firefox the margin (correctly) is 10px, while in IE6 the margin becomes 20px!! Code:
<html>
<head>
<style>
div.box{
float: left;
margin-left: 10px;
margin-bottom:10px;
clear:left;
border: 1px solid black;
width:100px;
}
div.row {
float: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="row">
<div class="box">
Hello One
</div>
<div class="box">
Hello Three
</div>
</div>
<div class="row">
<div class="box">
Hello Two
</div>
</div>
</body>
</html>
Can anyone tell me why this is happing? will I have to resolve to hack to solve this, or I am writing my html incorrectly? regards, sim085 Hi, While testing our webpage, we found that in all browsers the CSS menu works fine except in Safari, on browsing the child nodes of the menu. The menu just closes on the second or third select. I would greatly appreciate any help to fix this bug. The CSS code is below. Regards, Sharon. Code : <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 100%; background: #eee; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu h2 { color: #fff; background: #000; text-transform: uppercase; } #menu a { color: #000; background: #efefef; text-decoration: none; } #menu a:hover { color: #a00; background: #fff; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> I'm trying to get a dropdown menu to work properly (with IE, it works fine in FF) in the sidebar, thus vertically not horizontally. This dropdown menu has worked fine before, but only when using it horizontally, across the top. Basically, it prevents the user from clicking on the submenu options (I'm thinking it has something to do with z-index), but the parent menu options work fine. You can see the issue here with IE6 or 7: http://www.groundedgroup.com/clients/NWR/ Here's the respective CSS: Code:
/* Sidebar / Menu */
#sidebar {
float: left;
top: 16px;
left: 2px;
display: block;
position: relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFFFFF;
letter-spacing: 1px;
text-align:right;
z-index: 3;
}
#sidebar ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 4;
}
#sidebar li {
display: block;
float: left;
min-height: 20px;
position: relative;
text-align: left;
padding: 5px 20px 4px 16px;
margin: 0px 0px 0px 0px;
}
#sidebar h2 {
font-size: 1.2em;
padding: 0;
margin: 0;
}
#sidebar li ul {
width: 150px;
height: auto;
top: 100%;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
letter-spacing: 3px;
}
#sidebar li.LargeMenu ul {
width: 200px;
height: auto;
top: 100%;
left: 0px;
}
#sidebar li ul li {
text-align: left;
width: 118px;
height: auto;
min-height: auto;
display: block;
}
#sidebar li.LargeMenu ul li {
text-align: left;
width: 198px;
height: auto;
min-height: auto;
display: block;
}
#sidebar a {
text-decoration: none;
letter-spacing: 1px;
}
#sidebar li li ul {
top: 0;
left: 0;
}
#sidebar li li:hover ul {
left: 150px;
}
/* initialy hide all sub sidemenus */
#sidebar ul ul,
#sidebar ul li:hover ul ul,
#sidebar ul ul li:hover ul ul,
#sidebar ul ul ul li:hover ul ul,
#sidebar ul ul ul ul li:hover ul ul {
position: absolute;
display:none;
}
/* display them on hover */
#sidebar li:hover ul,
#sidebar ul li:hover ul,
#sidebar ul ul li:hover ul,
#sidebar ul ul ul li:hover ul,
#sidebar ul ul ul ul li:hover ul,
#sidebar ul ul ul ul ul li:hover ul {
display: block;
}
#sidebar #PhpWebcontent {
display:none;
}
/* define the consecutive colors */
#sidebar {
color: #FFFFFF;
}
#sidebar ul{
-moz-opacity: 1; /* for mozilla */
opacity: 1; /* for safari */
khtml-opacity: 1/* for konquerer and older safari */
}
#feeds li {
background: url(images/feed.png) top left no-repeat;
padding-left: 18px;
}
#sidebar h2 {
color: #FFFFFF;
}
#sidebar a {
color: #ffffff;
letter-spacing: 1px;
}
#sidebar ul li:hover {
background: #333333;
}
#sidebar ul li ul {
}
#sidebar ul li ul li {
background: #333333;
}
#sidebar ul li ul li:hover {
background: #666666;
}
#sidebar ul li ul ul li{
background: #666666;
}
#sidebar ul li ul ul li:hover {
background: #999999;
}
/* End Sidebar / Menu */
Any ideas on how to make this work properly when used on the side? Thanks in advance. gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? I just tested my site with IE6 and it's very broken (although it's valid HTML 4.01 strict according to w3.org). Main problem I am having is the links. I have a left navigation box, and a list of links inside it, the links display is set to 'block'. When the user's cursor is on the same line as the link, I want the whole line to change BG color and be clickable. This works now with FF perfectly. In IE your mouse has to be ON the actual link for the background to change color, and there is space on the left of the link block. Here is an example (not my site): http://rmideas.com/menus/menutest/NavToBar.htm The top right menu works like I want it to in FF, but in IE your cursor has to be on 'home'. How can I get this to work properly in both FF and IE? and I have overlapping problems, some code overlaps in one browser but looks fine in another. I have a map on an html page. If you mouseover "Savannah" the color of "Savannah" will change. The same will happen for "Broad". The problem is that the color doesn't change on "Broad" until you mouseover the top right part of "Broad". (Savannah and Broad are the only two that are active at this time.) You have seen this all over the web. I don't want to use Javascript. I want to do this using CSS. I do not have something quite right in my CSS. I have checked and checked and nothing stands out. I have looked at examples of Stu Nichols code similar to this, but I can't see anything. I thought it was a problem with the z-index, but nothing happens when I change the numbers. What am I doing wrong? Gayle CSS code: PHP Code: #imap { display: block; width: 801px; height: 677px; background: url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; position: relative; /*margin : 0 auto 2em auto; */ margin: 0 0; background-image: url(Images/RiverBasinMap_DENR.jpg); } #imap a { color: #000; font-family: arial, sans-serif; font-size: 1.2em; font-weight: bold; text-transform: uppercase; } a#title, a#title:visited { display: block; width: 801px; height: 0; padding-top : 260px; position : absolute; left: 0; top: 0; cursor: default; text-decoration: none; } * html a#title { height: 677px; height: 0; } #imap a#title:hover { background: transparent url(Images/RiverBasinMap_DENR.jpg) 0 0 no-repeat; overflow: visible; color: #c00; z-index: 10; } /*BROAD*/ a#broad { display:block; width:141px; height:159px; /*padding-top : 120px;*/ overflow:hidden; position: absolute; left: 285px; top: 295px; overflow: hidden; } * html a#broad { height: 159px; height: 0; } a#broad:hover { background: transparent url(images/Broad_Over.gif) no-repeat 0 0; overflow: visible; z-index: 21; } /*SAVANNAH*/ a#savannah { display: block; width: 181px; height: 313px; /*<!-- padding-top : 120px;-->*/ overflow: hidden; position: absolute; left: 226px; top: 318px; overflow: hidden; } * html a#savannah { height: 313px; height: 0; } a#savannah:hover { background: transparent url(images/Savannah_Over.gif) no-repeat 0 0; overflow: visible; z-index: 20; } HTML code: PHP Code: <body> <dl id="imap" name="imap"> <dt><a id="map" href="#nogo">Test Map</a></dt> <dd><a href="#" name="broad" title="Broad" id="broad"></a></dd> <dd><a href="#" name="savannah" title="Savannah" id="savannah"></a></dd> </dl> </body> Dear all, I am willing to develop a div tag, which will cover the entire body tag. The code I am using is the following: Code: <div id="warningLayer" style="position:absolute; width:100%; height:100%; margin:0; padding:0; background-color:#000000; opacity: 0.5; z-index:999999999; display:block; overflow:visible;"> </div> Unfortunately, the HTML page covers more that the browser window, hence when the visitor scrolls down the page, the body remains uncovered. How could I fix this issue? Thank you in advance. Hi all, I would like to be able to have the body background change when moving from page to page. Is it possible, without javascript. Code: body {
margin: 0px;
padding: 5px 0px 5px 0px;
background: url(blue2.jpg) fixed;
} {
Specifically the surrounding blue2.jpg that frames the page. page link css link Thanks. I'm a novice with CSS and HTML so the following may seem elementary to most of you. I'm a retail vitamin store owner with a website, (URL address blocked: See forum rules) . We do very well with our store front and are getting better and better with our online discount vitamin store. Our web master has programmed our site so we can easily insert new products. This is done in the <body>. Recently I've wanted to add some spice with color and formatting . At first I was doing this with something like <FONT FACE="Verdana, Helvetica, Arial" size="4" color="006600">. But now as I get into CSS and double checking all code with W3.org, it doesn't like this approach. Now I'm trying <span id="enzymatic" class="prod_description"> in the <body> with span#enzymatic p { color: green; } span#enzymatic h4{ color: blue; } etc. in a CSS definition file. It all works well, but W3.org still doesn't like where I've inserted the code. If you go to our page: (URL address blocked: See forum rules)=country-life-seniority-multivitamin You will get among other "errors" the following message: <h4>Seniority ™ Multi-Vitamin Capsules </h4> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Any hints as to what basic rules I'm breaking? Be kind. Many thanks, healthyphil I am currently setting the body id of my pages to highlight what item I am on... Such as: body#news #news_tab a, { border-bottom: 1px solid #fff; background: #fff; color: #000; } But I was wondering if it was also possible to somehow make a div appear (changing display from hidden to block) by putting an id in the body tag....But since the div isn't a link, for some reason I can't make it work. I tried: Adding this div: <div id="news" style="display:none">Testing Me</div> Adding this body tag: <body id="news"> And then adding this style definition: body#news #news { display: block; } but it still doesn't display. Is this just not possible? Is there anyway around it? Thanks! |
|||||||