HTML - Img Border Disappears With Inline Style

I can't figure out why when this page is resized in IE7 the text and pictures disappear and all that is left is the background image. There is no problem with FireFox. Any suggestions?

http://www.brackinsbaraz.com

Hello everyone,

I have an image inside a div, when I try to make the image a clickable hyperlink the image disappears and there is nothing to click or see.


Code:

<div id="google"> 
<a href="http://www.google.com/">                       
<img src="google_icon.png" height="23" width="23" /> 
</a> 
</div>

I tried an alternative way by making the Div a hyperlink with the following code...

Code:

<div id="google"  class="hand" onclick="location.href='http://www.google.com';" target="_blank">  
<img src="google_icon.png" title="google" height="23" width="23" />  
</div>

This works except for a couple problems...1st when hovering over the link nothing is shown in the browser status bar and 2nd, the target="_blank" isn't working.

Here is a link to my site http://chasehearn.com/

On the left hand side there are 6 images (one is not showing) which i would like to make links.

I made the first (from the left) one work by making the Div that contains the image a link, but I can't get the link to open in a new window and I don't like how the browser (i'm using chrome) status bar doesn't show anything when hovering over the link.

The 2nd icon (which can't be seen) disappears whenever I add <a href></a> tags around it.

The images are in the correct folder.

Anyone have any ideas on what I'm doing wrong?

Thanks!

In this code I'm using, on the index page is a log-in box. Once a user logs in the log-in box disappears and the container below the log-in box moves up to the log-in box spot. The reason I want to change this is that it leaves a blank space below the moved-up container. Can this code below be changed to, instead of the log-in box disappearing, it is replaced by an equal sized text box, thereby not allowing the below container(news flash) to move up? Any help will be appreciated. Thanks.

Code:

<!--Begin Right Column-->
<div id="column-right-1">
  <!--Begin Login Box-->
  <div id="login-box">
    <!--[onload_300;block=div;when [var.show_login_box]=1;comm]-->
    <form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
      <ul>
        <li><label><font class="font4_13">[var.lang_user_name]:</font></label><span class="username"><input type="text" name="user_name_login" size="16" style="width:138px;" /></span></li>
        <li>&nbsp;</li>
        <li><label><font class="font4_13">[var.lang_password]:</font></label><span class="password"><input type="password" name="password_login" size="16" style="width:138px;" /></span></li>
        <li>&nbsp;</li>
        <li>
          <input type="submit" value="[var.lang_login_now]" class="button-form" />
        </li>
        <li>&nbsp;</li>
        <li>
          <a href="login.php">[ [var.lang_password_reminder] ]</a>&nbsp;<b>|</b>&nbsp;<a href="[var.register_menu_link]">[ [var.lang_register_today] ]</a>
          <input type="hidden" name="submitted" value="yes" />
          <input type="hidden" name="remember_me" value="remember_me" />
        </li>
        </ul>
      </form>
  </div>
  <!--End Login Box-->

  <!--Begin News Flash-->
  <div class="header-narrow">Welcome</div>
  <div class="container-narrow">
  This is for your content.Lorem ipsum
  adipisicing elit, sed do eiusmod
  ut labore et dolore magna aliqua
  <ul class="content-list-narrow">
      <li><!--[var.newsflash;htmlconv=no;comm]--></li>
    </ul>
  </div>
  <div class="container-narrow-bottom"></div>
  <!--End News Flash-->

</div>
<!--End Right Column-->

Hi, I run an online music website, http://obscurealbums.com

At the end of my last post, I decided to put some buttons with links to Amazon US and UK stores, and everything works fine. However, if you click on the post's title (so clicking on the individual post) the images are replaced by the alt text and the Amazon US is strikethrough.

How can I get around this? If you need any more details, please let me know - I'm an HTML novice...

Thanks for your time.

can somebody please tell me a code that will show my image link only when a guest is on my phpbb forum and it will disappear when they log in.

Is their any shortcut to give inline css in Dreamviewer ?
Since I am using Dreamviewer & I have to write Inline CSS explicitly & there is streachable facility in the control so that we can stretch & its appropriate width & height can be assign to its component ?
Since I am getting it in dreamviewer & if any body knows how to do it then please let me know abt it ?
Regards....

Well, i'm not sure i'm gonna use this snippet but i can think of plenty reasons why i might:
Code:

<h4 style="display:<?php print $display; ?>">

It won't validate because, quote:
"character "<" is the first character of a delimiter but occurred as data."

Maybe i've been staring at it too long but i don't see the difference from any other php statement, which the validator should simply not parse.

??

Thanks,
Joey

Hello everyone, I have a problem and it is driving me insane :/.

I am trying to create 3 inline boxes (using span or div?) that are right next to one another (ie. with no borders). The two at either side are of length 25% and the middle is of length 50%. Here is my effort at coding it myself :

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=utf-8" />
<title>Untitled Document</title>
<style>
body {
	word-spacing: 0px;
}
.sideWrap {
	top: 0px;
	width: 25%;
	height: 100px;
	background-color: #0CF;
	display: inline-block;
}
.sideWrap2 {
	top: 0px;
	width: 25%;
	height: 100px;
	background-color: #0CF;
	display: inline-block;
}
.center {
	padding: 0px;
	margin: 0px;
	left: 25%;
	width: 50%;
	height: 200px;
	background-color: #0F0;
	display: inline-block;
}
</style>
</head>

<body>
<span class="sideWrap"></span>
<span class="center"></span>
<span class="sideWrap"></span>
</body>
</html>

But unfortunately, this produces ... something I dont want .. as shown by the attachment. This clearly has inexplicable white borders that I have not coded :S, and the three blocks are not inline. Can anyone give a simple explanation as to how to put these in line and eliminate the border between them?

Thanks in advance,
mintsmike

I have display:inline and its adding in two drop boxes that it shouldnt. After the drop boxes it then stops the inline. Im new to css, have only been trying it for the past couple of days. The two drop down boxes are suppose to be on the left, under the links at the top. Can someone explain to me why inline stops where it does? Thanks. Oh yeah, the links under <li> I know their to the wrong address's.

body {
font-family:georgia,'times new roman',times,serif;
color:#BD0A70;
background-color:#F2F2F2;
}
ul.navbar {
list-style-type: none;
padding:0;
width:32em;
float:left;
}
ul.navbar li {
display:inline;
font-size:125%;
background-color:#007BA7;
margin:.10em;
}
ul.navbar a,ul.navbar a:visited {
color:#ffffff;
text-decoration:none;
}
ul.navbar a:hover {
background:#00008B;
}
form.jump {
/* position: absolute; */
float: left;
}
div.floatright {
/* position: absolute; */
float: right;
}
h1 {
clear:both;
font-family:helvetica,geneva,arial,SunSans-Regular,sans-serif;
}



------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<link rel="stylesheet" href="mystyle.css">
</head>

<body>
<a charset="ISO-8859-1">

<!-- Site navigation menu -->

<ul class="navbar">
<li><a href="index.html">Change email</a>
<li><a href="musings.html">Change Password</a>
<li><a href="town.html">F.A.Q.</a>
<li><a href="town.html">Contact</a>
<li><a href="links.html">Log out</a>
<li>
</li>
</ul>
<form class="jump" action="/reredirect.php" align="left" method="post">
<input type ="text" name="userpage" size="17" value="Jump to user page" onFocus="this.value=''">
<img src="cooltext406694699.png" align="absbottom" onmouseover="this.src='cooltext406694699MouseOver.png';" onmouseout="this.src='cooltext406694699.png';" input type="submit" value="Submit" name="submit"></img>
</form>

<div class="floatright">
<script type="text/javascript"><!--
/* 234x60, created 11/22/08 */
google_ad_slot = "0343255875";
google_ad_width = 234;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<!-- Main content -->

<table>
<tr>
<td>
<form method="post" action="/redirect.php" name="event">
<select name="select" class="breakinline" onChange="this.form.submit()">
<OPTION SELECTED>Select friend
<OPTION value="/users/sharon">name1
<OPTION value="/users/carrie">name2
<OPTION value="/users/capy">name3
<OPTION value="/users/charla">name4
</SELECT>

</FORM>
<td>
<form id="myeventz" method="post" action="/changeevent.php" name="myevent">
<select name="myevent" class="tabletxt" onChange="this.form.submit()">
<OPTION SELECTED=>12/25 Christmas</option>
<OPTION value="0101 Event One">01/01 Event one
<OPTION value=" 0202Eventtwo">Remove this event
<OPTION value=" ">Add a new event
</SELECT>
</FORM>
</td>
</tr>
</table>
<p>Select item's to remove</p>

Which doctype doesn't allow for inline? Right now every line break in my code, IE creates a space in the tables. How do I get rid of this?

Thanks,

Alec

This question might be rather basic. I'm not a web-developer, though I have a lot of other coding experience.

As part of an internal webpage I'm creating, I want to access a webservice that returns a string and display it on the page. The service is accessed by URL, and requires parameters that are dynamically generated base upon the request parameters, so I can't just use #include.

What I want to see is something like this, where the number string is provided by the webservice: Authorization code: 1343-7205-7570-8264 I tried this:
Code:

Authorization code: <object type=text/plain data="http://blah/service?params"></object>

IE doesn't output the resulting string. Firefox does output the string, but it's not cleanly inlined with the rest of the text. It has it's own big block of the screen that the text sits in.

Is there a simple way to insert the text from a dynamically generated URL into the current page?

I'd like to open an inline frame on my site. I've got the code this far; however I cannot find out how to finish it. I need to knowhow to get it to open at a certain spot on the page. So like an example would be I want it to open at spot x on a page. How would I code this to open it at that spot?

Code:

<html>
<body>

<iframe src="default.asp"
width=125px
height=125px></iframe>


</body>
</html>

I am a newbie in HTML. I would like to be able to display an inline image with a caption (that just display inline as a big character). I have googled a lot but found no satisfying solution. Any suggestion for that?

Here's my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>MyTitle</TITLE>

<STYLE type="text/css">
.quanswer { border:1px solid #00c; }
.quanswer img { margin-right:5px; cursor:pointer; width:20px; }
.text { display:inline; color:#bbb; background:#000; }
</STYLE>

</HEAD>
<BODY>



<DIV class="quanswer">
	<IMG src="graphics/qucheckbox_normal.png">
	<DIV class="text">Agree</DIV>
</DIV>

<BR>

<DIV class="quanswer">
	<IMG src="graphics/qucheckbox_normal.png">
	Disagree
</DIV>



</BODY>
</HTML>

It references a 20x20 PNG image but you should get the idea wiithout such an image.

All I want to do is make the text vertically-aligned to halfway up the image. Centralised, in other words. I've been trying to do it by adding a bottom margin to the text, or by adding a negative top margin to the image, but nothing works!

I've got a feeling I'm forgetting something really obvious...

Please help,
Seymour.