Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Image display

Status
Not open for further replies.
carranz

carranz

Technical User
Joined
Nov 17, 2006
Messages
40
Location
US
This code displays the image in IE but not in Firefox.
Does anyone know why it would not show up in Firefox?
thanks

#masthead1
{
width: 100%;
min-width: 800px;
position: relative;
line-height: 100%;
margin: 0px;
padding: 0px;
background-color: #d1d1d1;
background-image: url(../../images/images/masthead/gradient.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}
 
Sort by date Sort by votes
If there is no content in the div, FF is probably correctly displaying it. Try putting content in it or assigning a height.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Here is my div. Still not sure why its not working on firefox.

<div id="masthead1">
<h1 class="masttitle">
<a href=" title="Hello Title">hello</a>
</h1>
<h2 class="masturl">
<a href=" title="The Hello"> </h2>
<form id="mastnavigation" action=" method="get" name="gs">
<ol>
<li>
<a href=" title="Help">Help</a> </li>
<li>
<a href=" title="Map"> map</a> </li>
<li>
<a href=" title="Find people">Find people</a> </li>
<li><a href=" title="Webmail">Webmail</a> </li>
<li>
<div class="label">
<label for="search">
Hello </label>
</div>
<input class="textfield" type="text" name="q" size="14" maxlength="256" value="Search" onfocus="this.value='';" accesskey="s" tabindex="1" />
<input name="submit" type="image" accesskey="return" tabindex="2" src="images/images/template_masthead/go_button.gif" alt="Submit" height="17" width="21" />
<input value="date:D:L:d1" name="sort" type="hidden" />
<input value="xml_no_dtd" name="output" type="hidden" />
<input value="UTF-8" name="ie" type="hidden" />
<input value="UTF-8" name="oe" type="hidden" />
<input value="default_frontend" name="client" type="hidden" />
<input value="default_frontend" name="proxystylesheet" type="hidden" />
<input value="default_collection" name="site" type="hidden" />
<input type="hidden" name="as_dt" value="i" />
</li>
</ol>
</form>

</div>
 
Upvote 0 Downvote
Obviosuly my first guess was incorrect. [smile]

Are you using the same css file for both browsers? The relative path to the background image will be calculated from the location of the css file.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Are your elements inside the #masthead1 either

a) floated or
b) absolutely positioned?

If they are, your #masthead1 will be zero px high in FF (which is correct behaviour) but will have height in IE.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Vragabond

You are right I changed it to fix and now it works thanks for your help
 
Upvote 0 Downvote
I have another question.

I have another .css file that is used in my page. If I dont use the other css it works fine. but if i combined them it stretches the image

the image for some reason is stretched out.

this is the image code
<input name="submit" type="image" accesskey="return" tabindex="2" src="images/images/template_masthead/go_button.gif" alt="Submit" height="17" width="21" />

Here is the index I'm using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns=" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="./css/css/navbar1.css" />
<link rel="stylesheet" type="text/css" href="./css/globalx.css" />
<script src="src/dropdown.js" type="text/javascript"></script>
<title></title>

</head>

<body>
<div id="masthead1">
<h1 class="masttitle">
<a href=" title="Hello Title">hello</a>
</h1>
<h2 class="masturl">
<a href=" title="The Hello"> </h2>
<form id="mastnavigation" action=" method="get" name="gs">
<ol>
<li>
<a href=" title="Help">Help</a> </li>
<li>
<a href=" title="Map"> map</a> </li>
<li>
<a href=" title="Find people">Find people</a> </li>
<li><a href=" title="Webmail">Webmail</a> </li>
<li>
<div class="label">
<label for="search">
Hello </label>
</div>
<input class="textfield" type="text" name="q" size="14" maxlength="256" value="Search" onfocus="this.value='';" accesskey="s" tabindex="1" />
<input name="submit" type="image" accesskey="return" tabindex="2" src="images/images/template_masthead/go_button.gif" alt="Submit" height="17" width="21" />
<input value="date:D:L:d1" name="sort" type="hidden" />
<input value="xml_no_dtd" name="output" type="hidden" />
<input value="UTF-8" name="ie" type="hidden" />
<input value="UTF-8" name="oe" type="hidden" />
<input value="default_frontend" name="client" type="hidden" />
<input value="default_frontend" name="proxystylesheet" type="hidden" />
<input value="default_collection" name="site" type="hidden" />
<input type="hidden" name="as_dt" value="i" />
</li>
</ol>
</form>

</div>
<div id="masthead">

<h1><a href="index.html">test</a></h1>

</div>

<!-- Begin Main Column -->

<div id="mainContent">

<h2>Test</h2>

<p></p>

<h3>&nbsp;</h3>

<fieldset>
</fieldset>

</div>

<!-- Begin Side Column -->

<div id="secondaryContent">

<div class="secondaryContentBox">

<h2>Quick Links </h2>

<p>&nbsp;</p>

</div>

<p class="source">&nbsp;</p>

</div>

<!-- Begin Footer -->

<ul id="footer">
<li>.</li>
<li></li>
</ul>


</body>
</html>

If someone could help I would appreciate it
 
Upvote 0 Downvote

Here is the navbar1.css

body
{
font-family: "trebuchet ms", Helvetica, Arial, sans-serif;
font-size: 85%;
line-height: 135%;

}

#masthead1
{
width: 100%;
min-width: 800px;
position: relative;
line-height: 100%;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
background-image:url(../../images/images/gradients.JPG);
background-position: 0px 0px;
background-repeat: no-repeat;
}

h1.masttitle, h2.masturl
{
margin: 0px;
float: left;
position: relative;
padding: 8px;
font-family: "trebuchet ms", sans-serif;
font-size: 100%;
line-height: 100%;
font-weight: normal;
}

h1.masttitle
{
padding-left: 11px;
padding-right: 11px;
background-color: #990000;
border-right: 1px solid #ccc;
}

h1.masttitle a, h2.masturl a
{
text-decoration: none;
color: white;
}

h1.masttitle a:hover
{
color: #F9F7DC;
text-decoration: underline;
}

h2.masturl a:hover
{
color: #F9F7DC;
text-decoration: underline;
}

#mastnavigation
{
float: right;
padding: 0px;
padding-top: 4px;
margin: 0px;
font-family: "trebuchet ms", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 100%;
font-weight: normal;
position: relative;
}

#mastnavigation ol
{
display: inline;
margin-bottom: 0;
list-style-type: none;
color: #fff;
margin-right: 6px;
}

#mastnavigation ol li
{
display: inline;
}

#mastnavigation ol li img { vertical-align: middle; }

#mastnavigation ol li a
{
color: #222;
padding: 0em 5px;
text-decoration: none;
border-right: 0px solid #ccc;
}

#mastnavigation ol li a:hover
{
background: #eee;
color: black;
}

#mastnavigation input {
vertical-align: middle;
}

#mastnavigation input.textfield
{
padding: 0px;
font-family: "trebuchet ms", sans-serif;
background: #DDE0C6;
font-size: 100%;
width: 65px;
border: 1px solid gray;
height: 1.4em;
}
br.clearall { clear: both; }

div.hr
{
margin-top: 1px;
width: 100%;
height: 1px;
background: #D5D5E6 url(../../images/images/masthead/.gif) no-repeat scroll center;
margin-bottom: 0px;
url(../../images/images/masthead/gradient.png)
}
div.hr hr { display: none; }

/* to hide label from Camino browser */
.label { display: none; }
 
Upvote 0 Downvote
No change

Also here is the other .css file
this .css file formates the rest of the page
* {
margin:0;
padding:0;
}
html {
text-align:center;
background:#F3F3F3;
}
body {
font:62.5% Verdana, Arial, Helvetica;
text-align:left;
color:#333;
width:75em;
background:#FFF;
padding:0.0em;
background:#FFF url(../images/body_bg.gif) bottom repeat-x;
border:0.1em solid #EAEAEA;
margin-top: 0em;
margin-right: auto;
margin-bottom: 0em;
margin-left: auto;
}
p {
font-size:1.2em;
line-height:1.5em;
margin:1em 0;
}
a {
color:#004D85;
text-decoration:none;
}
p a, td a, th a {
background:url(../images/link_underline.gif) bottom repeat-x;
padding-bottom:0.1em;
}

ul {
list-style:none;
}

#masthead {
width:100%;
height:10em;
position:relative;
margin-bottom:0.3em;
background:url(../images/masthead_bg.gif) repeat-x;
line-height:14em;
}
#masthead h1 {
font-size:2em;
font-family:"trebuchet ms";
margin-left:1em;
margin-top:0.8em;
color:#990000;
vertical-align: top;
right: 5%;
margin-bottom: 8em;
background-image: url(../images/images/osulogo.gif);
background-repeat: no-repeat;
}
#masthead h1 a {
color:#990000;
vertical-align: top;
text-align: left;
}
#masthead sup {
font-size:0.5em;
}
#breadCrumbs {
clear:both;
padding:0.5em 2em;
margin-top:0.3em;
background:#EAEAEA url(../images/breadcrumbs_bg.gif);
}
#breadCrumbs li {
display:inline;
}
#breadCrumbs li a {
margin-right:0.5em;
padding-right:1em;
background:url(../images/breadcrumbs_bullet.gif) right 0.7em no-repeat;
}
#breadCrumbs li a:hover, #footer li a:hover {
text-decoration:underline;
}
/* Main Column */
#mainContent {
width:53em;
padding:2em 0 2em 2em;
float:left;
}
#mainContent h2 {
color:#F60;
font-size:1.5em;
}
#mainContent p + h2 {
margin-top:1.5em;
}
#mainContent h3 {
font-size:1.25em;
}
#mainContent blockquote {
padding:0 2em;
font-style:italic;
font-size:0.9em;
color:#444;
border-left:4px solid #F90;
}
#mainContent ul {
color:#F90;
}
#mainContent li {
background:url(../images/li_bullet.gif) left center no-repeat;
font-size:1.2em;
padding-left:1em;
margin:0 0 0.5em 1em;
color:#333;
}
#suckerfish {
width:100%;
height:10em;
font-family:monaco, courier;
}
/* Main Column Table */

#mainContent table {
margin-top:1.5em;
}
#mainContent thead th {
background:#EAEAEA;
}
#mainContent td {
padding:0.5em;
background:#F4F4F4;
}
#mainContent td:hover {
background:#EAEAEA;
}
#mainContent th {
padding:0.5em;
background:#F4F4F4;
color:#004D85;
}
#mainContent th strong {
color:#F60;
}
/* Form */

fieldset {
padding:1em 1em 0.5em;
border:1px solid #EAEAEA;
margin-top:2em;
background:#F7F7F7;
}
label {
display:block;
padding-bottom:0.5em;
font-weight:bold;
}
input, textarea {
border:1px solid #CCC;
padding:0.25em;
width:20em;
}
textarea {
width:28em;
height:5em;
font:1.2em Verdana, Arial, Helvetica, sans-serif;
}
input:hover, input:focus, textarea:hover, textarea:focus {
border-color:#999;
}
#submit {
color:#FFF;
font-size:1em;
font-weight:bold;
width:auto;
background:#F90 url(../images/nav_bg.gif) bottom repeat-x;
}
input#submit:hover {
border-color:#F60;
}
/* Side Column */
#secondaryContent {
width:16em;
padding:2em;
float:left;
}
#secondaryContent h2, #secondaryContent p {
font-size:1.2em;
}
#secondaryContent h2 {
color:#F60;
}
.secondaryContentBox {
border:1px solid #EAEAEA;
background:#F7F7F7;
padding:1em 1em 0.5em;
margin-bottom:2em;
}
.secondaryContentBox span {
color:#F60;
font-weight:bold;
}
#secondaryContent blockquote {
font-style:italic;
font-size:0.9em;
padding:0.5em 0 0 2em;
background:url(../images/left_quote.gif) no-repeat;
}
#secondaryContent blockquote p {
background:url(../images/right_quote.gif) right bottom no-repeat;
padding-bottom:1em;
}
#secondaryContent blockquote span {
margin-left:2em;
}
#secondaryContent .source {
text-align:right;
margin:-0.5em 0 2em;
font-size:1em;
}
#footer {
text-align:center;
clear:both;
padding:1em 0 0;
background:url(../images/footer_hr.gif) repeat-x;
}
#footer li {
display:inline;
margin:0.5em;
}
 
Upvote 0 Downvote
It's because you're adding an image to the submit input type. The src attribute is only valid in input if the type of the input is image. Additionally, there are no width and height attributes in input elements. I don't know why you thought you can just add things to your HTML because they seem convenient.

Your input element is defined once, in the stylesheet:
Code: 
input, textarea {
    border:1px solid #CCC;
    padding:0.25em;
    [b]width:20em;[/b]
}
This is where the width of the element is defined and this is what stretches your image.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
PeDa
  • Locked
  • Question Question
Media query: display = none/inline/block
Replies
1
Views
1K
PeDa
PeDa
jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
PeDa
  • Locked
  • Question Question
Display table td's as block element on mobile phone
Replies
3
Views
1K
spamjim
spamjim
waubain
  • Locked
  • Question Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image.
Replies
5
Views
637
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top