|
CSS - Help Defining Page Border...not Right In Ff/netscape
Need some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content.
Here is my page: [Not an actual business...just a learning project] My Home Page Here is My CSS file: My CSS File Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect. (I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?) Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE. If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me! Thanks for helping me learn...(in advance) PWD Similar Tutorialsi was having trouble getting rid of the padding between cells in IE, i used the advice i got from this forum and added the style border-colapse and now everything is lined up perfect in IE, but in netscape (version 7.1) the top and left borders just vanished, can anyone help? contact.html Code: <table>
<tbody>
<tr>
<td>
telephone
</td>
<td>
757.555.2888
</td?
</tr>
<tr>
<td>
e-mail
</td>
<td>
jonathonball@cox.net
</td>
</tr>
</tbody>
</table>
body.css Code: table { border-collapse: collapse; }
td { border: 1px black solid; }
you can see what it's doing at my temporary web page http://members.cox.net/jonathonball/ in the Contact section Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. Greetings Yall, I am having a big problem, I am woeking on a site for a huge client and in netscape approx. 50px is cut off the top of the page and my tables sized to 100% cut off approx. 50px from the bottom. I have no idea why or if it is evan a CSS problem at all.... Can anyone give some insight. here is a link: http://www.slbdrivingcentre.ca/dev/ Hi, I've just spent all night re-building my site as HTML and CSS, since my Joomla site was suffering from a slight case of death due to "hosting issues" during a plaform migration I've got the site looking and working sweet, apart from one small thing. In Netscape 8.1 which I currently have installed, it loads the content in the right of the design right down at the bottom of the screen. When you refresh the browser it jumps back to the top, and it works perfectly for all links !!! It displays superbly in IE all of the time. I've been through the CSS checking that I'm using the clear and float in the right places, and I've checked the actual widths of all of the elements to be sure that they add up to what they are supposed to, but somehow it's still only displaying properly in Netscape after a page refresh. I've put in all of the box model hacks in my code for old browsers. The only thing that stops this from happening is removing the tag "display:table;" in my CSS. But that's used to extend the faux columns down to the bottom of the screen in Netscape. I'm not keen on any of the hacks for extending columns, so I decided on faux columns. The thing is, if it is that tag that's causing it to display incorrectly, why is it having no effect when the page gets reloaded? Try for yourself. Click a link in the menu a few times, then click the refresh button a few times. You will see the content load incorrectly, and then correctly! Puzzling. http://www.acecards.com Code: body {
background-color: #999999;
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
}
#container {
width: 750px; /* For browsers with no escapes */
\width: 770px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #000000;
}
#banner {
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
height: 251px;
background-repeat: no-repeat;
clear: both;
}
#mainarea {
clear: both;
width: 750px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 750px; /* For good browsers */
background: url(images/fauxcolumns.gif) repeat-y;
display: table;
}
#sidebar {
width: 179px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 179px; /* For good browsers */
background-color: #993300;
float: left;
}
#content {
margin-top: 0px;
float: right;
background-color: #FFFFFF;
width: 570px; /*For browsers with no escapes */
\width: 570px; /*For IE5/Win*/
w\idth: 570px; /*For good browsers */
}
#footer {
width: 740px; /* For browsers with no escapes */
\width: 750px; /* For IE5/Win */
w\idth: 740px; /* For good browsers */
padding: 5px;
clear: both;
}
.FooterText {
font-family: Verdana;
color: #FFFFFF;
font-size: 10px;
text-align: right;
}
.Bodytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
line-height: 17px;
text-align: justify;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodylink {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #499EEE;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.Bodyhighlight {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #993300;
font-size: 12px;
line-height: 17px;
font-weight: bold;
text-align: left;
padding-top: 2px;
padding-bottom: 2px;
}
.SideBarBanner {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
line-height:inherit;
padding-top: 5px;
padding-bottom: 5px;
}
.SideBarLink {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.SideBarHeadingTop {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarHeading {
background-color: #FF9B6A;
height: auto;
width: 169px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 169px; /* For good browsers */
padding: 5px;
color: #000000;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border-top:thick solid;
border-top-color:#000000;
border-bottom:thin solid;
border-bottom-color:#D74600;
}
.SideBarMenuBlock {
background-image: url(images/button.gif);
background-repeat: no-repeat;
height: 26px;
margin-top: 4px;
margin-bottom: 0px;
padding-left: 20px;
margin-left: 9px;
margin-right: 9px;
width: 159px; /* For browsers with no escapes */
\width: 179px; /* For IE5/Win */
w\idth: 159px; /* For good browsers */
text-align: left;
vertical-align: middle;
color: #000000;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: underline;
}
.Heading {
width: 520px; /* For browsers with no escapes */
\width: 570px; /* For IE5/Win */
w\idth: 520px; /* For good browsers */
padding-left: 40px;
padding-right: 10px;
padding-top: 15px;
padding-bottom: 10px;
background-image: url(images/aceofspades.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: left;
vertical-align: top;
font-weight: bold;
font-style: italic;
}
img {
border: none;
}
Hi, I want see what my page will look like with a border around it. I assume that it is done with CSS.Style file? What would be the code? And where do I put it? http://www.learn-how-to-weld.com/mig-welding.html Then how would I make the background a different color out side the border like on this page. http://www.learn-how-to-weld.com Peter I can only get my page to display correctly in IE6. Not IE7 or Firefox. If anyone could help, it'd be much appreciated! Basically, the borders on the left/right don't stretch all the way down the page in IE7 and Firefox (like they do in IE6). Here is the website: http://www.stacyandmatt.com/ Here's the simple HTML: Code: <body>
<div id="container">
<div id="maincontent">
<div id="header">
<p> </p>
</div>
<div id="navBar">
<p> </p>
</div>
<div id="mainRight">
<img src="images/mainPic.jpg" />
</div>
<div class="spacer"> </div>
</div>
</div>
</body>
And here is the CSS: Code: html, body {
background: #000;
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
color: #F09;
height: 100%;
line-height: 1.5em;
}
#container {
background: #000;
height: 100%;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
}
#maincontent {
background: #000 url(../images/borderTest.jpg) repeat-y top left;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
border-right: 6px solid #F09;
overflow: visible;
}
#header {
background: url(../images/header.gif) no-repeat top left;
width: 100%;
height: 141px;
margin: 0px;
padding: 0px;
}
#navBar {
width: 155px;
float: left;
padding: 20px 0px 0px 40px;
margin: 0px;
color: #000000;
}
#mainRight {
width: 555px;
float: right;
padding: 20px 5px 0px 5px;
margin: 0px;
}
.spacer {
clear: both;
}
Thanks! Floats always cause me some consternation. This one sort of works, except for the border and the padding/margin (which may be related to the border issue). I've only checked this on FF on a Mac so far, btw. Right now the divs do float, but the left side of the border is a million miles away. Solving the border issue might take care of the padding/margin between #caravan and #rally (right now each tweak does nothing). Also, is it possible to get the text at the end to flow under the property changes box? Probably not, as I set a width of 65%, but that was the only way I knew to get the two boxes to float up...I guess I'd have to make that last paragraph its own div to get the text to go all the way across? The page I'm trying to figure out is here and the relevant CSS is #caravantop { background-color: #ffefca; margin: 0; padding: 1.2em 2% 0 2%; } #caravan { float: left; width: 63%; background-color: #ffefca; padding: 0; margin: 0 2% 0 2%; } #rally1 { padding-right: .1em; border: 1.2px #775b36 solid; margin-right: .5em; margin-bottom: 1em; } #rally1 h4 { margin-bottom: .6em; } #rally1 p { font-size: .7em; padding-bottom: 0; margin: .6em; } #rally1 ul { list-style-image: url(../images/icons10_webpage.gif); list-style-type: circle; text-decoration: none; font-size: .7em; margin-bottom: 1em; margin-left: 2.5em; } #rally1 li { margin-bottom: .4em; margin-left: 1.7em; } #rally1 li.lastli { margin-bottom: 2.5em; } /*#rally1 ul.nohouse { list-style-image: none; list-style-type: none; text-decoration: none; font-size: .8em; margin-bottom: .3em; margin-left: 0; }*/ #rally2 { padding-right: .1em; border: 1.2px #775b36 solid; margin-right: .5em; margin-bottom: 1em; } #rally2 h4 { margin-bottom: .6em; } #rally2 p { font-size: .7em; padding-bottom: 0; margin: .6em; } #rally2 ul { list-style-image: url(../images/icons10_webpage.gif); list-style-type: circle; text-decoration: none; font-size: .7em; margin-bottom: 1em; margin-left: 2.5em; } #rally2 li { margin-bottom: .4em; margin-left: 1.7em; } #rally2 li.lastli { margin-bottom: 2.5em; } Is it possible to define the size of a DIV, by distance to the edges? I've read up, and have always used a bit of CSS. I'm redoing my site, and noticed something different between Mozilla and IE. Personally, I'd ditch IE, but 98% of my viewers use it, so I can't. Basically, in IE, the following works: Code:
P
{
color: black;
font-size: 10pt;
font-family:tahoma;
}
myown
{
color: blue;
font-size: 10pt;
font-family: Tahoma;
}
<myown>This is my text</myown>
When I run it in IE though, it basically ignores the self-defined tag, and requires me to use a pre-defined keyword. I don't want to use "P", b/c it carries the html<P> tag characteristics... a new line in this case. Thanks. very simple. this may sound strange, but i figured css would be the easiest solution. i simply have one of 2 characters that will display in each TD of a table. either Y or N. is there anyway to specify the color of the background, or TD, depending on the character within? if its Y, make it red, and if its N, make it blue. that all. any ideas??? Hello I have defined the following rules for anchors: Code:
a:link {
color: green;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:hover {
color: blue;
text-decoration: underline;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:visited {
color: orange;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
a:active {
color: red;
text-decoration: none;
text-transform: none;
list-style-type: disc;
font-family: Arial;
font-size: 12px;
}
I have 2 links in the site: Code: <a href="1.html">1</a> <a href="javascript: void test();">Test</a> The first link obeys the rules defined above The second link doesn't obey the hover rule for some reason. My only guess is that triggering JavaScript code from links may cause this problem. I am testing this on IE6 On Mozilla and Opera both links work fine I would appreciate any help Hi to all, & this is my question: say I have a css class such as: .classA1 { color: RED; font-weight: bold; font-size: 11px } Now I want to define other classes, that vary only in the font color, while everything else remains unchanged, for example: .classA2 = { color: GREEN; rest same as A1 } .classA3 = { color: BLUE; rest same as A1 } .classA4 = { color: YELLOW; rest same as A1 } How do I go about it, so I avoid having to repeat every time the same attributes? I know there is a way of defining a main class & then the variations (like for elements - a - a:hover - a:visited etc..) but I'm not sure how you do this... Thanks a lot for your help, Luca I have some CSS for forms as seen below. (depreciated version) Code:
<div class="item">
<div class="text">Your Name:</div>
<div class="field"><input type="text" /></div>
</div>
...
form .text {
float: left;
width: 75px;
}
form .field {
float: left;
}
Some forms I'd like to be wider than others, though. Is it possible to define the width of .text using inline styles (eg: <form style="*">) rather than create a new class for each width I want to use? how do you define the the color of a hyperlink before it has been clicked and after it has been clicked? Thanks. Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
Hello. I'm trying to figure out a way to define link states (link, active, hover, visited) using an inline style or in a manner other than specifying via an imported or embedded style sheet. The project I'm working on involves designing an HTML email (template) with links that have formatting specified. Some webmail providers (particulalrly gmail and hotmail) seem to strip the away all code from the BODY tag on up (I assume to avoid conflicts with their own formatting), making formatting a very creative endeavor. Anyhow, without specifying these attributes in the header, is there any other way of doing this? The best I can figure out is specifying a link color, but without allowing for changes on visited, active, or hovered links. I've been googling for hours, so any help would be appreciated. Thanks. P.S. I know the prevailing attitudes on plain text vs html formatted emails and how it ties into spam, etc. I assure you this isn't being done in the context of spam, but rather, an opt-in newsletter for a client interested in sending fully formatted newsletters. :-) Ok what i have been asked to do is set up a webpage with three divisions ( i think), in a column structure. Title at top then seperate divisions? for each of my books which will be getting added. Now the books should be contained as the book title, author, publisher etc with an image to the right of all this information. However the author, title and publisher have all different formats, the author should be bold, the title in italics etc etc. I am finding it difficult to know what tag to use to split up this information. Just now i have created a <div> section labelled book1 for the first book. How do you go about splitting up the txt within this division tag as i will be writing a CSS sheet to manipulate the author, title and publisher with all different formats. Thanks i have just finished making a site for a collective of illustrators I belong to, and now I'm hearing back that some people are having trouble with it. It's at www.illustratorselbow.com (I'm not allowed to post a url without spaces!) & i'm hoping people might be able to have a look at it & view the source and help me out. If you click on somebody's name, you see the thumbnails on the right and the image on the left. When you compress the window, the thumbnails jump about and shrink. I want to make it so this can't happen- I'd rather that the section with the main image in it compressed a bit, or would side-scroll. Any idea how to do this? I'm pretty new to CSS too so I don't really know how to fix this. It's just a drag because on computers with smaller screens/resolutions, the thumbnails look really messy. (Bear in mind that I have extremely basic knowledge of html/css/php, i hand code rather than use dreamweaver etc, and I've never used php or css before this site. I started using it because I keep hearing that frames are bad news nowadays, but it's been sooo much trouble with my limited abilities... alas) I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! |
|||||||