|
CSS - The Firefox Shift
I've noticed when I am replacing my filler text with text that is not as long, Firefox is shifting my layout over to the right.
For instance look at a look of filler text: http://www.jaycutler.com/Eumyotheria/the_beast/favorites.html Now for the replacing text: http://www.jaycutler.com/Eumyotheria/the_beast/contest_history.html You will notice if you use the sidebar (or the top nav) the shift occurs when you visit a page with a lot of content. In IE it is fine, but Firefox doesn't like. Not sure why as I use replaced text. Any ideas? The stylesheet is located here if needed: http://www.jaycutler.com/Eumyotheria/css/stylesheet.css Thanks for your time and any help that you can pass on. Brian Similar Tutorialshttp://tinyurl.com/5llwfl I'm having some problems with this page in particular. Try clicking on one of the Left or Right white image arrows below the main picture. This only occurs in Firefox 2.x. Once you click the link, the content area below "Starting from $278.497" should shift roughly 5 pixels down. I thought it may be related to the dotted link outline that surrounds the image, but that was not the case. I applied styles to get rid of that and there was no changes. I also thought it may be related to a position:relative; bug which this site has been notorious for. I tried making certain divs in that area position:relative to no avail. So to test further I tried an overall #content *{position:relative;} fix which could not fix the position shift, either. I'm not sure what else it could be. And while I do have access to the build of this app, I have not been able to reproduce the issue by downloading all HTML, CSS, and image files locally. The index page of my site shifts to the far left in IE. The background does not move (stays in center) but the rest of the page shifts far left. It only happens on the index page all others are fine. I would link to it but I am new and cannot post links...any suggestions? Thanks. The Divs holding the "In Stock" banners (absolutely positioned) on this page seem to shift to the right (the first box is missing a banner, and there is an extra banner off the page. Any idea why? Please view at woodflooringvalue.com and click on any of the product link buttons under the "in stock" heading. Thanks. Hello, i have a DIV in which i have put a javascript for my top advertisement banner. This banner is one of those that when the user moves their mouse over it, it expands.. is there anyway i can make it so when the banner inside the div expands, the DIV height expands accordingly to the height of the banner? and when it collpases, the div will shift back to original height? thanks Some of my pages are long enough to cause the primary vertical scroll bar to become active but most of the pages are short enough so that it stays hidden. Because of this the entire content automatically shifts to the left to accommodate the width of the scroll bar. I don't like that. I would like it to stay in the same spot no matter what. (centered) my wrapper has margin: auto, 0px; so that the page stays centered when the window size changes. Is there a way to just bump the page to the right only when the scroll bar is active? (via my external css) Thanks a bunch. (if there is a thread about this already please feel free to just post the link to it) Also, I am going to add this head-banging dude because its just so flippin stupid. I am having a problem unique to IE 8. The right most nav button jumps down a bunch of pixels. This does not seem to be happening in any other browsers, except IE 8. Some code involving said elements: Code: #nav {
right: 10px;
top: 45px;
position: absolute;
background-color: black;
height: 50px;
width: 640px;
}
ul {
text-overflow: clip;
display: inline;
border-bottom: 25px solid black;
}
li {
list-style-type: none;
float: left;
margin-top:25px;
}
#aboutButton {
display: block;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
margin-left: 40px;
clear: both;
}
#aboutButton:hover {
display: block;
background-position: 0px 20px;
height: 20px;
width: 93px;
background-image: url(images/nav/about_button2.gif);
clear: both;
}
message me for a link to the site if you would like to see it in action. any help is appreciated. thanks! I am editing a CSS layout I have found. Basically, I want a fixed header. The original layout had the fixed header (AP Div) take up 100% width with right positioning of 16px to allow for the scrollbar, but this was making it awkward for me to centre another div within the Header/AP Div, so I have edited my layout like this: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
* {
margin: 0px;
padding: 0px;
}
#printhead {
display:none;
}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: Arial, Helvetica, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;/* */
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-color: #EAEBEB;
}
#content {
display:block;
height:100%;
max-height:100%;
overflow:auto;
position:relative;
z-index:3;
word-wrap:break-word;
}
#info {
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #666666;
padding-right: 25px;
padding-left: 25px;
}
#head {
position:absolute;
width:800px;
height:137px;
z-index:5;
border-top-style: none;
border: none;
background-color: #FFFFFF;
left: -400px;
margin-left: 50%;
}
.top-spacer {
display:block;
height:137px;
}
.btm-spacer {
display:block;
height:30px;
background-color: #FFFFFF;
width: 800px;
margin-right: auto;
margin-left: auto;
}
</style>
<style type="text/css" media="print">
html {
padding:0;
margin:0;
border:0;
background:#fff;
font-size:10pt;
font-family: arial, sans-serif;
min-height: 100%;
margin-bottom: 1px;
}
body {
padding:0;
margin:0;
border:0;
}
#content {
display:block;
position:relative;
z-index:3;
word-wrap:break-word;
}
#head {
display:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#printhead {
height:100px;
background:#fff;
font-size:24pt;
color:#000;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="head"></div>
<div id="content">
<div class="top-spacer"></div>
<div id="info">
<p>Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here
Type goes here and here </p>
<p> </p>
</div>
<div class="btm-spacer"></div>
</div>
</body>
</html>
Basically, I have cheated to centre the AP Div, but now in Firefox, when there is overflow, the Div underneath the header moves over to accommodate the scrollbar, but the header doesn't. Can anyone suggest a workaround for this? Thanks. I have a few lines of text inside a nested div. Everything is fine if I leave it at that but as soon as I add some more, the whole page (wrapper) get shifted left by 9 pixels. It causes a 'jump' hen navigating between this page and the rest of the site. All of these pages are quite simple and were created from the same index page. HTML Code:
<div id="wrap">
<div id="content_awards">
<div id="subcontent_awards">
<div class="award_col">
<h3>Subtitle 1</h3>
Winner<br /><br />
<h3>Subtitle 2</h3>
Winner<br /><br />
<h3>Subtitle 3</h3>
Commended<br /><br />
<!--
<h3>Subtitle 4</h3>
Commended<br /><br />
-->
</div>
<br style="clear:both;" />
</div>
<br style="clear:both;" />
</div>
<br style="clear:both;" />
</div>
CSS Code:
body
{
padding:2px 0 0 0;
margin:0;
text-align:center;
font-size:14px;
background-color:#FFFFFF;
}
#wrap
{
margin:0 auto;
width:760px;
padding:0;
text-align:center;
}
#content_awards
{
margin:0 auto;
padding:20px 0 0 0;
width:754px;
color:#FFFFFF;
text-align:left;
background-color:#31578E;
clear:both;
}
#subcontent_awards
{
margin:0 auto;
padding:0 10px 10px 10px;
width:734px;
background-image:url('images/bg_awards_shadows.jpg');
background-repeat:no-repeat;
background-color:#31578E;
clear:both;
}
div.award_col
{
float:left;
margin:0 0 0 1px;
padding:0 10px 0 20px;
width:152px;
line-height:130%;
font-size:12px;
}
Thanks, Hello CSS gurus, When I add an italic font style to my web page, it causes a vertical shift in IE6. Everything is fine in Firefox. Can anyone tell me what is happening with this? Vertical Shifted with Italics: http://www.innovations-online.com/t...ch_news_it.html No Italics is Fine: http://www.innovations-online.com/t.../tech_news.html The same problem occurs with oblique. Thanks in advance! Darin Hey everyone, I am doing some stuff to my site, and I noticed that when someone clicks a link, the text shifts sligtly to the left. I thought it would be the active border, but I am not sure. It is a small bug, but it is kind of annoying me. Here is my link code. Code: #main a:link {
color: #41619a;
padding: 0;
}
#main a:visited {
color: #41619b;
}
#main a:hover {
text-decoration: underline;
}
#main a:active {
border: 0;
}
Here is one of the pages where it happens. Any suggestions on how to fix this? That title is probably a little confusing but it is what's happening. I have an inline list (<li>) that will shift to the right when I hover over links that have been visited. The links that have never been visited do not cause this problem. It's very strange and I'm not sure what's up. The page... http://www.vaska.com/a/ The css... http://www.vaska.com/a/css/c.css To get the menu to appear, hover over the "menu/options" and it will appear. I know for a fact that these issues are not becaused by the javascript in this file...somehow it's a CSS issue. I'm having the problem in Safari and Firefox...I'm not sure about IE/PC and such, but I'm betting the problem is there as well. Thanks for any help...v Hi all, I'm a CSS newbie and I need your help, pleeease! I tried to make a rollover graphic menu today. And of course I got completely stuck with this code: Code:
/* Header */
#header {
position: absolute;
background: url(images/header.jpg) no-repeat;
width: 830px;
}
#menu, #menu li a:hover, #menu li.current a {
background: url(images/link_menu.jpg) no-repeat;
}
#menu {
margin: 115px 0px 0px 29px ;
width: 600px ;
height: 75px ;
list-style-type: none;
}
#menu li {
float: left;
margin: 0px 0px 0px 0px;
width: 120px;
height: 75px;
}
#menu li#menu-contact {
margin: 0;
}
#menu li a {
display: block;
padding: 75px 0px 0px 0px;
height: 75px;
overflow: hidden;
}
html>body #menu li a {
height: 0;
}
#menu li#menu-home a:hover, #menu li#menu-home.current a {
background-position: 0px -75px 120px 29px;
}
#menu li#menu-about a:hover, #menu li#menu-about.current a {
background-position: -120px -75px;
}
#menu li#menu-gallery a:hover, #menu li#menu-gallery.current a {
background-position: -240px -75px;
}
#menu li#menu-foto-shop a:hover, #menu li#menu-foto-shop.current a {
background-position: -360px -75px;
}
#menu li#menu-contact a:hover, #menu li#menu-contact.current a {
background-position: -480px -75px;
}
The rollover works, but somehow it shifts to the right Like this: URL What am I doing wrong? Why does it shift? Thanks in advance... Hi all, I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code: Code: <img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250"> this img tag was placed right after the <body> tag. When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row! Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help... Any help would be appreciated..thanks.. I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it. The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox? You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html). css Code: Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; } #main-nav html4strict Code: Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div> <div id="main-nav"> The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers. Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem. I'm having an issue where a website is showing up a few pixels off in Mac Firefox than it is in PC firefox. Anyone have a quick fix for this? Mac Screenshots: http://graffetto.com/chops/clairus_screens.pdf PC Firefox Screenshot: Firefox, IE, and Netscape all look identical on PC, while firefox, IE and safari look identical on Mac, but different from PC (except safari - messed up text) Any help is greatly appreciated Edit: after reviewing my post I realized I was quite vague. What I'm looking for is a way to filter CSS so that only Mac Firefox users will receive one CSS file, and PC users will receive another. Hi, I'm having an issue with Firefox displaying my home page correctly. It previews smaller than other pages in my site even though they all share the same style sheet. In IE 7 my site previews fine, the issue is with Firefox for some reason the wrapper seems to shrink on the home page and any help or tips to steer me the right way would be greatly appreciated, thanks. Code: <---Style sheet---->
body {
margin: 0;
padding: 0;
background-image: url(assests/wrapperimage.jpg);
background-attachment: fixed;
}
p {
color: #FFFFFF;
font-family: "Courier New", Courier, monospace;
line-height: 20px;
letter-spacing: 2px;
font-size: 12px;
margin-top: 0;
margin-bottom: 0px;
}
h1 {
font-size: 2.4em;
color: #00FF00;
border-bottom-width: thin;
border-bottom-color: #00FF00;
border-bottom-style: dashed;
margin-top: 40px;
text-align: center;
}
h2 {
font-size: 20px;
color: #CCFF66;
text-align: center;
}
#wrapper {
width: 800px;
height: 1150px;
border-right: 2px solid #00FF00;
border-left: 2px solid #00FF00;
border-bottom: #000000 10px;
margin-right: auto;
margin-left: auto;
background: #000000;
}
#banner {
height: 250px;
width: 800px;
}
#sidebar {
float: left;
width: 190px;
height: 500px;
margin-top: 60px;
margin-left: 10px;
margin-bottom: 60px;
padding-left: 10px;
color: #FFFFFF;
text-align: center;
border-color: #999999;
border-style: thin;
}
#sidebar li {
list-style: none;
background-image: url(assests/images/images/images/check.jpg);
background-repeat: no-repeat;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 6px;
text-align: left;
}
#main {
float:right;
width: 500px;
padding: 5px;
}
ul.nav {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 50px;
padding-left: 0px;
list-style: none;
float: left;
width: 750px;
letter-spacing: 3px;
}
ul.nav li {
float: left;
padding-left: 10px;
margin-left: 15px;
margin-right: 10px;
}
ul.nav a {
display: block;
padding-left: 15px;
padding-right: 5px;
margin-left: 10px;
margin-right: 5px;
background-color: #000000;
text-decoration: none;
color: #00FF00;
text-align: center;
}
ul.nav a:hover {
background-image: url(assests/images/images/images/check.jpg);
background-position: left;
background-repeat: no-repeat;
padding-right: 10px;
color: #FFFFFF;
}
</style>
<----Home page HTML---->
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="assests/images/starbanner.jpg" />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About us?</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div id="sidebar">
<h2>Why have a website?</h2>
<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation.
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.
Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
<p>
</p>
</div>
<div id="main">
<h1>Web Design Studio</h1>
<p>star media is a web design studio located in Troy, Michigan. Our specialty is providing afforadable and customized web design services as well as graphic design and print services. With our competitve pricing and custom tailored marketing programs we will drive customers to your website and through your business doors. Our competitive pricing and quick turn around time in developing websites ensures you have your website up and running as quickly as possible without breaking the bank.
From basic and simple websites to high caliber e-commerce database driven websites Gstar media does it all.
<h2>Why have a website?</h2>
<p>In todays market having a business or being a professional can cost thousands of dollars and you could be missing out on siginificantly increasing revenues. The internet is low cost method of marketing that yields results with the proper planning, marketing and implemnation.
Taking advantage of the internet in your overall marketing plan is essential in today's market for your company to grow and remain competitve.
Take a look at our portfolio to see some of the work we've done or contact us today to schedule a no-obligation free consultation.</p>
</div>
</div>
</body>
</body>
</html>
<-------About US HTML------>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner">
<img src="assests/images/starbanner.jpg" />
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
<div id="sidebar">
<h2>We offer:</h2>
<ul>
<li>web design</li>
<li>web hosting</li>
<li>e-commerce</li>
<li>logo design</li>
<li>business card design</li>
<li>flyer design</li>
<li>customized marketing campaigns</li>
<li>Search engine optimization</li>
<li>web maintence</li>
<li>illustration</li>
</ul>
</p>
</div>
<div id="main">
<h1>Our Promise.</h1>
<p>star media is created with the goal of providing affordable web design service to small business owners and professionals. I graduated from Sheridan college with a degree in business and later went on to get a degree in graphic design. With a strong background in business I understand how to market your business and message effectively to prospective customers that will help spread the awarness of your products and services in order to increase your revenues. I have a strong understanding of graphic design principles with a working knowledge of CSS/XHTML, Photoshop CS3, and Illustrator CS3.
</p>
</div>
</div>
</body>
</html>
now i don't like saying things like possible bug because 99/100 it's not a bug, but some kind of user error. however, i have the following situation and i thought that describing it as a bug may get people interested in it two tables, both with auto width / height, both the same code. one table is set so that when viewed on screen it has display: none and then when printed it has display: block. if you do a print preview in internet explorer, the page shows two identicle tables. in mozilla, the table expands to fill the width of the page for the hidden table. see html attached for example; load in firefox / ie; do a print preview and you'll see what i mean. any ideas? Have a page at www.maxxedmotors.com/damo There is a div called "container" which is supposed to surround all of the content with a border. This works fine in IE 6/5.x, but in firefox the border only surrounds the div called "header". Can anyone tell me where i'm being dumb Any help greatfully appreciated. |
|||||||