Learn VBA & Macros in 1 Week!

CSS - Different Image Location In Different Browsers ???

Full Excel VBA Course - Beginner to Expert

Different Image Location In Different Browsers ???	View Content

I'm currently working on a very basic website, which seems on the edge of finishing. www.meltonbusiness.co.uk

Tiny hiccup remains is that the image RIGHTLY appears on "content area's" top right in Firefox but the same image appears right at the bottom of the Content.

Can anyone help.

My CSS at this stage looks like:

Code:

html, body 
{
	margin:0;
	padding:0;
}

body 
{
	font:75% verdana, arial, sans-serif;
	background:white;
}

p 
{
	margin:0 10px 10px;
	padding:0;
}

h1 
{
	height:100px;
	line-height:100px;
	text-align:center;
	font-family:"lucida calligraphy", verdana, arial, helvetica, sans-serif;
	font-size:36px;
	color:#534;
	margin:0;
}

.spacer 
{
	clear:both;
	background:url(spacer.png) top left;
}

.montage 
{
	background-color:black;
	text-align:center;
	clear:both;
	height:80px;
}

.wrapper 
{
	float:left;
	width:100%;
}

.content 
{
	margin:0 260px 0 100px;
	padding:5px 0 0 10px;
}

.content ul
{
	display:block;
}

.content li
{
	display:block;
	list-style-type:disc;
	padding:5px 0px 5px 0px;
	color:#333;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	letter-spacing:0.2px;
	text-align:justify;
}

p 
{
	line-height:1.4;
	color:#333;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	letter-spacing:0.2px;
	text-align:justify;
}

h2 
{
	font-size:20px;
	border-bottom:solid thin #666666; 
	color:blue;
	font-family:Georgia, "Times New Roman", Times, serif;
}


.heading 
{
	font-weight:bold;
	text-decoration:underline;
}

.nav 
{
	float:left;
	width:100px;
	margin-left:-100%;
	margin-top:20px;
}

.nav ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}

.nav ul li 
{
	display:block;
	margin-top:0;
	background:url(navbg.png) left repeat-x;
	border-bottom:1px solid #000;
	font-weight:700;
	padding:10px;
}

.nav a
{
	color:white;
	text-decoration:none
}

.nav a:hover
{
	color:yellow;
	text-decoration:none;
}

.nav img 
{
	margin-top:30px;
}

.right_col
{
	background:red;
	float:right;
	width:250px;
	margin-top:20px;
	margin-right: 0px;
	margin-left: -250px;
}

.advert
{
	position:relative;
	float:left;
	left:20px;
	background-color:#CCCCCC;
	width:80%;
	color:#006600;
	padding:20px;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
}

.advert a 
{
	text-decoration:none;
	color:red;
}

.advert a:hover 
{
	text-decoration:underline;
}

.footer 
{
	float:none;
	width:100%;
	border:1px solid #322;
	padding:10px;
	background-color:#a54;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	letter-spacing:1px;
	color:white;
}

.footer a 
{
	text-decoration:underline;
	color:white;
}

.footer a:hover 
{
	text-decoration:overline;
	color:#F0F8FF;
}

hr 
{
	text-align:left;
	width:100%;
	color:maroon;
	background-color:maroon;
	height:1px;
}

Full Excel VBA Course - Beginner to Expert

Background Image Not Working (in All Browsers).

Similar Tutorials

View Content

I'm trying to set the background image of my header and for some reason its not being applied at all.

CSS:
Code:

#header
{
    background: url('../Images/Master/Header_Background.jpg');
    color: White;
    width: 1000px;
    height: 150px;
    position: relative;
}

The image is the same height and width of the header. I know the image is there because I can use the same url in an <img> tag and it shows up fine. The header is inside a container which I'm not setting any background attributes at all. I'm not setting any for the body either. I don't know why the image isn't showing.

Thanks.

Css Header Image Too Small In Browsers

Similar Tutorials

View Content

I am trying to get my header image to stretch 100% width in the browsers. Right now it's centered--and too short.

My CSS code:

body {
font-family: Verdana, Arial Black, Trebuchat MS, Arial, Geneva;
background-color: #1c1c1c;
background-repeat:repeat-x;
border-color: #FC3;
border-width: 1px;
padding: 25px;
margin: 30px;
color: #FFC;
}

#header {
height: 200px;
width: 100%;
margin: 0;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-right: 0px;
margin-left: 0px;
border: thin solid #FFF;
border-style:none;
}

#header {
height: 200px;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

}

#p {
padding-left:inherit;
padding:inherit;
}

A:link {color:#FFF; text-decoration:underline; }
A:visited {color:#CCC; text-decoration:underline; }
A:hover {color:#FFC; text-decoration:underline; }
#nav {
height: 35px;
}

I've tried:
width: 100%;

and

width: 100%;
width: auto;

There is nothing useful online that has really touched on this problem. The only solutions are the "width 100%"

Any help would be so great please.

Div Location

Similar Tutorials

View Content

Im having problems dividing 2 divs into 2 columns. In the following code , I would like "category odd" to appear on left, and "category even" on right- on the same row

The current css for the columns is: .categories .categories1, .categories .categories2 {display:inline-block}

Working perfect in firefox, not working at all in explorer 6+7.

Quote:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css">  </style> </head> <body> <div class="categories"> <div class="categories1"> <div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div><div class="categoriesheader1">Category odd</div></div> <div class="categories2"><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div><div class="categoriesheader2">Category even</div></div> </div> </body> </html>

Top Menu Location

Similar Tutorials

View Content

Hi, am okay to CSS, but i have a problem i just can solve, i hope one of you can help.

I have a gallery site, what i have not create my self, download and install type of thing and i have made a custom header menu, but i can not get et to locate correctly.

As you can see on this site pictures.rcheli.dk there is a menu at the top " Home | RC Earth | Blog | Pictures | Contact " and i can get i to align to the right. If i resize the windows it scales with the window.

You can see here rcheli.dk how i wold like it to work, the location of the menu.

Can anybody help me with this issue, i think i have tried every thing.

How To Change Page Location Using Css

Similar Tutorials

View Content

How to change current page to other location after few seconds by using css script. Succeed by using meta refresh & onload in HTML but how to do in css.

Thanks & Regards

Tab Bar Location/positioning For Different Resolutions

Similar Tutorials

View Content

I have a tab bar that sits on top of two div columns. The bar is supposed to sit in the center of the top of the left column. I can achieve this perfectly via

Code:

position: absolute;
top: 16%;
left: 30%;

The problem here lays in the fact that anyone NOT running my screen resolution is telling me that it's not where it's supposed to be. How can I put this where it needs to be, regardless of who is viewing it, and how crappy their PC might be?

Swapping Content, Preserving Same Location

Similar Tutorials

View Content

What I don't like about my code below is that space is kept for Sections A and B, even when they are not visible.

Code:

<div id="container">
  <div id="A">
    Section A.
    <input type="button" value="Toggle extra" onClick="toggleExtra()">
    <span id="extra"></span>
  </div>
  <div id="B">
    Section B.
  </div>
</div>

What I really want is for Section A to take the place of Section B when the other button is clicked.

Purpose: I want the user to arrive at my web page and click a button to establish why they are there. If for A, they will be shown content for topic A. If for B, content for topic B.

(Further illustration: If you toggle the extra text on in section A and then view Section B, the blank area for Section A is that much bigger...)

Functional but incorrect code:
Code:

<html>
  <head>
    <link rel=stylesheet href="../common.css" type="text/css">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
    //<![CDATA[
      function switchIt(mode) {
        if (mode == 'A') {
          document.getElementById('A').style.visibility = 'visible';
          document.getElementById('B').style.visibility = 'hidden';
        }
        else {
          document.getElementById('A').style.visibility = 'hidden';
          document.getElementById('B').style.visibility = 'visible';
        }
      }

      var toggle = -1;
      function toggleExtra() {
        toggle *= -1;
        if (toggle == 1) {
          document.getElementById('extra').innerHTML = "<br>extra";
        }
        else {
          document.getElementById('extra').innerHTML = "";
        }
      }
    //]]>
    </script>
    <STYLE TYPE="text/css">
    <!--
    body {
      text-align: center;
    }

    #container {
      margin:0 auto 0 auto;
      width:400px;
      border:2px outset white;
    }
    #A {
      visibility:hidden;
      border:2px outset white;
    }
    #B {
      visibility:hidden;
      border:2px outset white;
    }
    -->
    </STYLE>
  </head>
<body>

<form>
<input type="button" value="Show section A" onClick="switchIt('A')">
<input type="button" value="Show section B" onClick="switchIt('B')">
</form>

<div id="container">
  <div id="A">
    Section A.
    <input type="button" value="Toggle extra" onClick="toggleExtra()">
    <span id="extra"></span>
  </div>
  <div id="B">
    Section B.
  </div>
</div>

</body>
</html>

I've been having a hard time with browser compatibility and I need a bit of help. This is what I'm trying to acheive. It's a link bar on top and then a page that contains left and right headers, dividers and content plus a footer (height is not an issue right now). I would like the #page to have a 2px border and every element inside to have a white 2px padding.
It seems that in IE, if I set #page with a 2px padding, I get exactly what I want but Firefox does not interpret it the same way. Is there a hack/workaround for this. I've attacned a picture of what I'm trying to get at.

Thanks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css"><!--

html, body {
	margin:0;
	padding:0;
	height:100%;
}

div {
	margin:0;
	padding:0;
}

div#holder {
	margin:auto;
	margin:auto;
	width:800px;
	height:100%;
	background:black;
}

div#links {
	width:auto;
	height:30px;
	background:pink;
}

div#page {
	width:auto;
	height:100%;
	background:white;
	border:2px black solid;
	padding:2px;
}


div#left {
	float:left;
	background:red;
	width:180px;
}

div#right {
	float:right;
	background:blue;
	width:610px;
}

div#footer {
	clear:both;
	width:auto;
	height:30px;
	background:green;
}


--/></style>

</head>
<body>

<div id="holder">
	<div id="links">1</div>
	<div id="page">
		<div id="header">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="divider">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="content">
			<div id="left">1</div>
			<div id="right">1</div>
		</div>
		<div id="footer">1</div>
	</div>
</div>

</body>
</html>

6px Uniformity Between Browsers

Similar Tutorials

View Content

Hi all,

I seem to be stumped on something that is probably simple. At this test site you'll notice the left nav area as well as the text content area.

I am trying to set it up so that both are 6 pixels below the header image. Obviously, then they would be even with each other.

Everything I've tried has come close but never right in both FF & IE. Could someone please give me a hand with this?

Thanks!

Chris

Compatibility With Different Browsers

Similar Tutorials

View Content

Hi all,
Compatibility with different browsers, link one and link looks good in ie but gets overlap in Firefox and too far apart in Opera.
Does anyone know how to make this menu compatible with a least these tree browsers. Any help is greatly appreciated thanks.

Code:

<style type="text/css">
ul { list-style-type: none; margin: 1.0em 0 0 30px; padding: 0; position: relative; overflow: visible; height: auto; }
ul li { height: 1.6em; width: 230px; }
ul li a, ul li a:visited { width: 200px; display: block; color: black; text-decoration: none; background: yellow; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px;}
ul li a:hover { display: block; background: green; color: black; }
ul li a.currentpage, ul li a.currentpage:visited { background: red; color: black; padding: 3px;}
</style>
<ul>
  <li><a href="menu3.html" class="currentpage">Main page </a></li>
  <li><a href="page2.html">Dummy page 2</a></li>
</ul>

Css For Multiple Browsers

Similar Tutorials

View Content

Hi all,

I have several CSS files to look after different browsers, but I use javascript to match the IE css with IE browsers, etc.

Can you only have one CSS file that looks after ALL browsers? So that if the user doesn't have javascript it's not a problem? I've heard of css hacks and css filters being used but I'm not all that familiar.

Ben