|
CSS - Navigation Bar Custom Positioning On Guildomatic Site
Hello,
I sincerely apologize ahead of time for what I think to be the craziness of this request, but I'm about to go bonkers. I have a website set up for a guild through guildomatic and I have some customizations applied courtesy of another, more css-savvy individual. He used a "custom css" and some JavaScript to do some skinning so that his theme looked like another theme. I've made further tweaks using my good ol'fashioned try try until you succeed mentality (some C++/Perl experience) but there is one problem that I just can't wrap my head around. There is a navigation bar (including login/logout/register links) inside a table tagged "crumb" that no matter what I do I cannot get it centered so that it stays in the correct position when the window changes size. I would like for the "crumb" to show up above the banner and centered (the banner is centered too) so that they move with eachother whether your viewport is large or small. Am I completely missing something here or is there a rule that I'm not following? I've tried applying the "auto" setting to the right and left margins in various different levels of the structure and figure I either haven't found the right combination or I'm going about this the wrong way. I have tried disabling the custom CSS and JS to make sure they aren't interfering and I still can't make this happen so far. Any help would be greatly appreciated. Thanks for reading! -Ryan Here's the code: Code:
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:100000001;"></div>
<div id="root">
<table id="root_table">
<tr id="adminConsoleContainer">
<td colspan="1">
<table class="controls">
<tr>
<td class="notices"></td>
<td class="configure">
<ul class="nav controls">
<li>
<img alt="Upgrade" class="raw_icon" src="(URL address blocked: See forum rules)" title="Upgrade" />
<a href="(URL address blocked: See forum rules)=2481105406&cep=b69e9d1e6f0577c6d79da3f5d9b8e910">Add Services</a>
</li>
<li>
<img alt="Administrator Console" class="raw_icon" src="(URL address blocked: See forum rules)" title="Administrator Console" />
<a href="/console">Administrator Console</a> </li> </ul> </td> </tr> </table> </td> </tr> <tr> <td id="banner">
<div class="ggcode">
<table cellpadding=0 cellspacing=0 width="1050" style="margin-left:auto;margin-right:auto;">
<tr>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
<td style="text-align:left;vertical-align:top;background-image:url((URL address blocked: See forum rules));background-repeat:repeat-x;">
<img style="align:top; padding-top:0px; width:970px; height:229px" src="(URL address blocked: See forum rules)">
</td>
<td width="20">
<img src="(URL address blocked: See forum rules)">
</td>
</tr>
</table>
<script type="text/javascript" src="(URL address blocked: See forum rules)"></script>
</div>
</td>
</tr>
<tr>
<td >
<table id="crumb">
<tr>
<td id="nav">
<div class="ggcode">
<div id="menuSection">
<a href="/">Home</a> - <a href="/forums">Forums</a> - <a href="/members">Roster</a> - <a href="/raids">Raids</a> - <a href="/items">Items</a> - <a href="/raids/attendance">Attendance</a> -
<a href="/dkp">TOPP</a> - <a href="(URL address blocked: See forum rules)">Logs</a>
</div>
</div>
</td>
<td id="user_welcome"> Welcome, Valcore. <a href="/user/logout">Log out</a><br/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</body>
Similar TutorialsI have ran into a bit of a problem getting the navigation to show all on one line when in a div set to 765px (The width I need the site to be...). The div is required for the rest of my site removing it is not an option. HTML: 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>Header</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en-us" /> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div style="width: 765px;"> <ul id="nav-header"> <li id="zero-nav"><a href="#">Zero</a></li> <li id="one-nav"><a href="#">One</a></li> <li id="two-nav"><a href="#">Two</a></li> <li id="three-nav"><a href="#">Three</a></li> <li id="four-nav"><a href="#">Four</a></li> <li id="five-nav"><a href="#">Five</a></li> </ul> </div> </body> </html> CSS: Code: ul#nav-header li {
display:block;
float:left;
}
ul#nav-header li a {
display:block;
outline:none;
width:101px;
height:74px;
background:url(as_nav_header.gif) no-repeat 0 0;
text-indent:-9009px;
margin:0;
overflow:hidden;
}
ul#nav-header li a:hover {
background-position:0 -74px;
}
ul#nav-header li#one-nav a {
width:134px;
background-position:-101px 0;
}
ul#nav-header li#one-nav a:hover {
background-position:-101px -74px
}
ul#nav-header li#two-nav a {
width:134px;
background-position:-235px 0;
}
ul#nav-header li#two-nav a:hover {
background-position:-235px -74px
}
ul#nav-header li#three-nav a {
width:137px;
background-position:-369px 0;
}
ul#nav-header li#three-nav a:hover {
background-position:-369px -74px
}
ul#nav-header li#four-nav a {
width:122px;
background-position:-506px 0;
}
ul#nav-header li#four-nav a:hover {
background-position:-506px -74px
}
ul#nav-header li#five-nav a {
width:134px;
background-position:-628px 0;
}
ul#nav-header li#five-nav a:hover {
background-position:-628px -74px
}
Thanks, - Chris B. I am very new to web design. I had an old friend of mine design this website for me: directdevelopmentinternational.org I am now trying to use what he did for that website you put together my bands website: throughtheconcreterecords.com I am trying to get the navigation bar to sit inside of the blank white box I have created in my header image. I also just want the text to be black and maybe when highlighted change to a different color. I also am trying to make it so when you click the burning book logo in the upper left corner it brings you back to the main page. I am having a terrible time figuring out how to do this as I am not sure what all of the different techniques are referred to. Any help at all would be much appreciated! On a 3 column page I left the center column completely empty because I am using a non-scrolling, centered image as background and I want it persistently visible, though the 2 marginal columns are welcome to scroll. My problem arises when I try to put my navigation bar at the bottom of the page. It insists upon occupying the empty center column and rising to the top of it (though it gets itself truncated to the width of the center column). I don't want it there; I want it a bit below the longer of the two (populated) marginal columns and centered on the page. This is my first attempt with CSS for page layout and I am using the template from glish. Hey, I'm a beginner just starting out and I ran into a problem building Site Navigation Bars for a practice-website. I would like a Navigation Bar that goes horizontally across the header, as well as a separate navigation bar that goes vertically down my sidebar. I had several questions regarding this endeavor. My current CSS code for my header div#header { width: auto; height: 100px; background: #ffffff url(DSC09762.jpg); padding: 5px; border-bottom: #000000 1px solid; } What I would like to add: ul { list-style-type:none; margin:0; padding:0; overflow:hidden; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } 1) How would I properly nest the latter part of the CSS code to the original? 2) Since I want to customize the design of the list that goes vertically down my side bar as well...I am concerned that I have to add an ID or Class Specification to each list. Am I correct in thinking this? Any tips regarding the preferred method? Help is much appreciated. Thanks! I am constructing a website using the sliding doors navigation (http://www.alistapart.com/articles/slidingdoors/ and http://www.alistapart.com/articles/slidingdoors2/). I have gone through both articles to successfully create the sliding doors naviagiton that I require. My header image that I wish to place behind the navigation is 780px wide by 263px high. Therefor, I will be placing this navigation at the bottom (baseline) of this image. I have increased my header div size to fit the image (780px x 263px). Then I have padded the navigation to try to make it position on the bottom of the image (padding-top: 236px). Unfortunatly, doing this give a 1px padding difference for IE and Firefox. IE shows it up fine, but Firefox does not. Firefox makes it look like its spaced 1px to many. If i decrease the padding to 235px, Firefox looks fine but IE displays it with 1px to less...I dont want to have to result to browser dependant css, but all hacks are welcome. Heres the code: Code:
body {
text-align: center;
background-color: #7999E4
}
#header{
width: 780px;
background: url('images/head.gif') repeat-x bottom;
font-size: 93%;
line-height: normal;
height: 263px;
padding: 0;
margin:0;
border:0;
}
#main {
background-color: #ffffff;
width: 780px;
height: 500px;
}
#nav2 {
background-color: #e7e7e7;
width: 100%;
border-bottom: 1px solid #000;
height: 20px;
}
#header ul {
margin: 0;
padding:0;
padding-top: 236px;
padding-left: 10px;
list-style: none;
}
#header li {
display:inline;
margin:0;
padding:0;
}
#header a {
float: left;
background: url('images/left_both.gif') no-repeat left top;
margin: 0;
padding: 0 0 0 9px;
border-bottom: 1px solid #765;
text-decoration: none;
}
#header a span{
float: left;
display: block;
background: url('images/right_both.gif') no-repeat right top;
padding: 5px 15px 4px 6px;
font-weight: bold;
color: #765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a span{float: none;}
/* End IE5-Mac hack*/
#header a:hover span{
color: #333;
}
#header #current a{
border-width: 0;
background-position: 0% -150px;
}
#header #current a span{
background-position: 100% -150px;
padding-bottom:5px;
color: #333;
}
#header a:hover {
background-position:0% -150px;
}
#header a:hover span {
background-position:100% -150px;
}
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<link title="Style" href="style2.css" type="text/css" rel="STYLESHEET">
</HEAD>
<BODY>
<center>
<div id="header">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li id="current"><a href="#"><span>Properties</span></a></li>
<li><a href="#"><span>Quick Searches</span></a></li>
<li><a href="#"><span>Holidays</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>
<div id="main">
<div id="nav2"></div>
</div>
<div id="footer">
</div>
</body>
</html>
I aim to create my own wordpress theme eventually, but for now I have been trying to customize free open source themes made by others. I have a test one set up at http://www.theepicnetwork.com/gfn My query here is that I am trying to make that navigation menu function as a dropdown menu, but I can't seem to do it. I managed to make it Wordpress 3.0 compatible so I can edit the menu items through the wp admin cp. But i just need to successfully give it a drop down function. Here is all my code. ------- NAV MENU CSS Code: /* Navigations*/ #nav { position:relative; padding:0; margin:0 auto; height:68px; width:1002px; background:url(images/nav_bg.png) no-repeat center top; } #nav ul { position:absolute; z-index:1; top:0; left:50px; width:900px; height:65px; padding:0; margin:0; list-style:none; } #nav li { float:left; margin:0; padding:0; list-style:none; } #nav a { display:block; padding:27px 20px; float:left; border:none; font:bold 12px Myriad Pro, Helvetica, Arial, sans-serif; color:#fff; text-transform:uppercase; } #nav a:hover{ color:#f0ff21; background:url(images/nav_over.gif) repeat-x center top; }
INTENDED DROPDOWN CSS - I copied this from one of my other sites. Code: #dropmenu, #dropmenu ul {margin-top:0px; margin-left:3px;padding:0px; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#0A7B05; font-weight:bold;} #dropmenu a {display:block; padding:6px 1em; color:#000; border-right:0px solid #000; text-decoration:none; background:transparent url(images/menu-button.png);font-weight:bold;} #dropmenu a:hover {background:transparent url(images/menu-button-hover.png); color:#fff;} #dropmenu li {float:left; position:relative;} #dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;} #dropmenu ul a {border:1px solid #000;} #dropmenu li ul {border-top:0px solid #000; width:14.1em;} #dropmenu li ul a {width:12em; height:auto; float:left; border-bottom:1px solid #000;} #dropmenu ul ul {top:auto;} #dropmenu li ul ul {left:12em; margin:0px 0 0 10px;} #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;} #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}
HEADER.PHP MENU LAYOUT Code: <div id="nav"> <ul id="dropdown"><li><a href="<?php echo get_option('home'); ?>">Home</a></li> <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?> </ul> </div>
----- any help will be appreciated I have come to the conclusion that tables are evil, plus I want to make my site very good, web standards wise. Thing is atm I suck at div tags etc. and I was wondering if anybody could offer insight into doing URL (relative positioning not absolute). It is a 3 column layout which I have heard can be hard. Also, how do you align div tags to the right of another e.g. my logo and then my current nav bar. Thanks p.s. please help, I want to change my wicked ways lol this should be simple, but i just don't seem to have the hang of css yet what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it maybe just looking at what i have will help more the HTML Code: ...... <body> <div id="all"> <div id="head"> Head Section </div> <div id="main"> Bar <div id="content">Content Goes Here</div> </div> <div id="footer"> footer </div> </div> </body> </html> and the css Code: body {
background-color:#ff0000;
}
#head {
height:200px;
}
#all {
margin-left:3%;
margin-right:3%;
background-color:#a0a0a0;
}
#main {
background-color:#ff00ff;
}
#side_bar{
background-color:#99ff99;
}
#content{
position:relative;
float:right;
width:80%;
right:10px;
background-color:#ffffff;
padding:5px;
}
#footer {
height:200px;
}
those funky colors are so i can see the divs Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! k so I have a weird problem. My site snafu-comics.com basically has a main table with all the content in it and then two images on the left and right side just for added visual effect when browser windows are larger resolution than 955 pixels. But the problem is how it's setup now the left image loads (pushing everything to the right side of the screen since it touches the main middle table on the right) Then the main table loads and it takes a little while to finish loading mostly due to the ads. Then the right image loads and once it loads the whole thing pops to the center of the screen like it should. What I'm trying to do is just get the center table in the center the whole time. And then when the rest loads it loads. Any ideas? and again for ease the site is snafu-comics.com Thanks for your help! I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Hi, I'm trying to make my own custom CSS for Internet Explorer to load when I visit the www.tv.com site. How do I go about making it domain specific? Is there an IE alternative to Firefox's @-moz-document domain("tv.com") method? I am new to coding so dont make fun of me or anything if this is stupid.. I'm coding my own tumblr right now, and it looks pretty good so far. I just dont know the code to make an image 'static' and stay at the top. If you take a look (hockey-lax-bro.tumblr.com/) you will see what i mean. The follow button and picture on the right 'follow' you wherever you scroll. Code: <div style="position:right;5px:top;25px">
<a href="https;||twitter.***/J_Harris012" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @J_Harris012</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.***/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style="position:right;30px:top;55px">
<a href="http;||i42.tinypic.***/2ai0etj.***" target="_blank">
<img class="normal" src="http;||i46.tinypic.***/15o8nj9.***" alt="install theme" />
</a>
</div>
Thats the coding that i have right now ^^ (i had to change a few things because new members are not allowed to post links) what do i need to change to make the buttons stay at the top? Hello, I'm working on converting my current table layout into strictly a CSS Layout . I've managed to get everything (layout wise at least...) displaying properly except for my right border. This is a small 30px x 1px drop shadow. I've been working with it for a few hours now, and I can't seem to get the image to even show up. Here is my CSS code: Code:
#container {
background-color: #726554;
width: 791px;
text-align: left;
margin: 0 auto;
}
#top {
position: absolute;
top: 0px;
left: 0px;
width: 791px;
height: 145px;
vertical-align: top;
}
#content {
background: #726554 url(PHP/img/right.jpg) right repeat-y;
margin-top: 30px;
width: 496px;
text-align: left;
vertical-align: top;
float: left;
}
#content p {
color: #f1f1f1;
font-family: Tahoma;
font-size: 13px;
margin: 0 0 10px 12px;
}
#content .date {
display: block;
color: #ff9100;
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
}
#left {
vertical-align: top;
float: left;
width: 265px;
height: 671px;
}
#contact {
clear: both;
background: #726554 url(PHP/img/right.jpg) right repeat-y;
font-size: 13px;
font-family: Tahoma;
text-align: center;
}
I don't think you'll need any HTML code for this problem, but let me know if you do! Thanks in advance, Jason I was wondering if there was a way to have a chapter listing in a OL or UL. I want to be able to have "Chapter <i>:" as the list style where <i> is the increment. is this possible. I thought I saw that somewhere floating around, but i can't seem to find it. thanks in advance. Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great. I have a question. If i create a custom class : p.q {color: black !important;} and a user has a css with the fallowing code: p {color: red !important;} will my text <p class="q">My text</p> be red or black and how can i prevent the user css from overriding my css Can I use custom fields in IE or not? This is the complete example page I'm working with: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="http://localhost:9080/garage68/">
<title>TestCSS</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #00FF00;
background-color: black;
}
.content {
position:absolute;
width:75%;
margin:5px 0px 0px 165px;
border:0px;
line-height: 20px;
z-index:3;
}
fieldset {
border: #26a solid 1px;
width: 85%;
margin-bottom: 5px;
}
header {
font-weight: bolder;
color: blue;
}
date {
font-weight: bolder;
color: red;
}
-->
</style>
</head>
<body>
<version>version: 3.1.0</version>
<div class="content">
<fieldset>
<date>2004-05-04</date>
<hr />
<header>Title1</header>
And Entry
</fieldset>
<fieldset>
<date>2004-01-21</date>
<hr />
<header>Title 2</header>
A Second Entry
</fieldset>
</div>
</body>
</html>
You'll see the difference taking a look at it in IE versus Firefox. It seems like it's picking up some things (even from the custom tags) but leaves off other things. How can I get these two pages to look the same (as in both look like the firefox version)? I'm making a site, and the guy I'm making it for says he wanted a more 'tough' font. So I downloaded a, 'tough' but still readable of course, font. The main page has an iframe, and the content in the iframe is where the text goes that has the tough font. Everything works when it's offline. But when I try uploading it, it's the old font. I even check the source and it's all old. The server is running extremely slow right now, so that might be the problem and it just hasn't uploaded yet or something. Because I also deleted the content files and refreshed the page and it was still old. So, I'll wait a little longer and check or something. I also know that viewers can't see custom fonts if they don't have them on their pc. So this is kind of seeming pretty pointless. But is there ANYWAY I Can make it viewable to everyone that views the site. So they can see the font even if they don't have it on their pc. Like, make them have it temporarily or something. My friend told me it had something to do with CSS, but I don't really know. Anything I can do to make it work? Is there maybe a Java Script I can use? as seen in this forum when posting a message, i was wondering how they get it so that the title of a section appears inside the border? example: ------ Title here --------------------| | | | bit of content | | | | | ------------------------------------- |
|||||||