CSS - Absolute Positioning, Xhtml Strict, Selecting Text

Hi-

I need to know if IE 5, IE 6 or IE7 are considered standards-compliant and do any of them support fully CS2 and strict standards?

Thanks in advance-
S

I have a search box/button I want to keep on a single line in a tool bar on my page in strict XHTML/CSS. The <form> tag produces a line break beforehand.

In old HTML I could put the <form> tag outside of the table row or data tags, but XHTML does not allow that (bad nesting). I found in devshed here to use style="display:inline;" which works! But the page does not validate as strict XHTML/CSS (using validator.w3.org).

<table><tr><td> <!-- simplified to illustrate!! -->
<form method="get" action="..." style="display:inline;">
<input type="text" name="q" size="10" maxlength="255" value="" />
<input type="submit" name="sa" value="go" />
</form>
</td></tr></table>

The Error and reason given is below. It seems that you can not have a block-level element (<input>) within in inline-level element (<form>).

***
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
***

Does anyone know how to code this to not have the linebreak and still maintain strict XHTML/CSS code?

quirks mode is what i'm using, but now im thinking that in order to support all browsers i need to jump to strict. now im really in trouble. is strict right for me? xhtml or html?

my site works perfectly in firefox because that is what i have been testing it in, but it works horribly in IE. so, will switching to strict give me the best compatibility?

Hi!

How do I open a link in a new window in XHTML strict? (knowing that target="_blank" forbidden).

Thank you

I think the best way to explain this is by example, if you go to this page:

http://lifeyouwant.workinprogress.co.uk/how-we-work

You will notice the drop down menu works fine in Firefox, Safari, Opera etc. However when it comes to IE7 the drop down menu is positioned too far to the right.

Has anyone got any ideas how I can get this to display correctly in IE7 (like it does in Firefox).

I would prefer to try not to use a hack for IE7.

ANy ideas would be great! Thanks.

Hello All.

I have very little experience with coding and the likes so i don;t even think I'm allowed to post on these forums? hehe

BUT, I have ran into a problem on myspace with code.

I am trying to create a linkable image I believe it would be called.

<a href="website url">
<img src="wouldnt let me post url's" />
</a>

Thats what i have so far. I beleive that means when the image is clicked it takes y ou to the homepage. (I dont even know if that is CSS, so i apologize if this is the wrong forum I'm posting on.)

I am trying to get the image to appear around 300 pixels from the left and 400 pixels from the top. I had looked on google for a solution of some code to help me out and all I found was thing saying how 'Absolute Positioning' was what was needed. I tried adding various bits of code I had found to the code i currently had, and some of them would almost work, but text would appear after the image and it would be clickable also.

I was just wondering how I could place the image were I want it and when it is clicked on, it takes you to the homepage.

Thanks in advance to anyone who replies, and also apologies for my incredible noobness.

-Connor

Good morning,

I've been working on my site, and it's in its final stages, but I'm experiencing a problem I can't figure out.

I have a floating bar with all of my navigation links in it which is absolutely defined with the following code:

Code:

#headerBar { /* sets position of floating bar */
	position: absolute;
	clear: both;
	top: 57px;
	left: 0px;
	padding: 0px;
	margin: 0px;
	width: 100%;
	filter: alpha(opacity=50);
	-moz-opacity: .50;
	opacity: .50;
		}

The problem I'm experiencing is that in Firefox, Safari, and Opera, the bar appears magically in the perfect position, however, in Internet Explorer, the bar is 5-10 pixels higher than it should be.

The url is: http://www.alokw.com

Any suggestions?

Thanks!

Hi, I was wondering if any CSS experts could give me some advice on how to position elements on a page. Right now I'm really into using absolute positioning because it just seems so easy to place things on an exact point on the screen irrespective of all other elements, but I am wondering whether that is considered bad practice, any advice would be greatly appreciated. Thank you in advance for any correspondence.

Hello everyone, I would like to ask for any and all help on solving this problem I am having.

Well recently I used to make all of my web sites in tables until I came upon an article saying you should use CSS and absolute positioning. Therefore, my problem is this, If you go to this partially completed site, http://sykotic-designz.org/newsite/index.html.

You will now notice that there are two 'shadow' images. One on the left and one on the right. The one on the left works fine. Test it by making your browser window smaller and bigger. You will notice the right shadow moves. I have tried various alternatives like using a table just for the one image but you still need to use absolute position and did not work, I have messed with displaying absolute position by % and by pixels. But it doesn't want to seem to work either. I am mainly having problems probably because I am new to the DIV tags in which I use entirely through out this page, I am not sure if CSS will help at all. You can view the source of the page if you wish. I appreciate and and all help you may provide, thanks!

Hey guys,

This is my first time messing with absolute positioning, and I am in a pickle.

I have created a website and it contains a services page. On the list of the services, when you scroll over each word, a block of text describing that particular service pops up.

Now, I have placed the box using <span>'s and hidden blocks. My problem is that when I change screen resolutions, the placement of the box changes. I am looking for a resolution-independent workaround for this, so that others running 1024, 1280, etc wont have a problem viewing the site correctly. I have searched the web dry it feels like. Maybe I'm just bad at looking, but its the last thing I need to do before putting up the site.

Check out the page and source code he
URL

Additionally, this is the code I used to make this (it's Eric Meyers PURE CSS codes):

Code:

<style type="text/css">
<!--
div#links a:hover {text-decoration: none; 
   background: #698165;}

div#links a span {display: none;}

div#links a:hover span {display: block;
   position: absolute; top: 535px; left: 233px; width: 377px; height: 230px;
   padding: 5px; margin: 10px; z-index: 100;
   color: white;
   font: 10px Verdana, sans-serif; text-align: justify;}
   
div#links a:link { text-decoration: none;
   color: white;}
   
div#links a:visited { text-decoration: none;
   color: white;}
-->
</style>

then the code is activated by:

Code:

<a href="#">Mowing
<span>Service Landscapes will tend and maintain your lawn with the most substantial of detail and care.  Our services will provide you with a beautiful, healthy landscape that will turn heads.  If you are looking for quality and dependable service that you can turn to time and time again, look no further than Service Landscapes.
</span>
</a>

Any help would be greatly appreciated, and thanks in advance!

Hi everyone,

I just stated handcoding and I am having a great time. Everything seemed to be going well on my first site until I previewed it on IE. After solving the nasty png issue, I realized that the two elements that I have absolute postioned a) screw the layout up in IE6 b) don't appear all together in IE7 and IE8, but doesn't screw up the flow.

The elements are an arm that is supposed to hang off the left side, and hair that sits above the contentwrap (you will understand once you look)

It renders perfectly in Firefox, safari and google chrome. Go figure.

I read I can't put hyperlinks because of spam, so if you don't mind helping out, please visit:

w w w . goscoblog. com/test/index.html

Thanks In advance

Now i have used some of this on one of my designs and at 1280x1024 resolution it looks perfect however if you decrease the resolution then it move the image into a place i dont want it to be. Now is there a way around this or am i just going to have to put the "this site is best viewed at 1280x1024" sign on it?

IE absolutely sucks (pun intended). Or mayhaps its the developer. In any case:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>My site</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
     <style type="text/css">
       #top_main_content { width: 955px; }
       #top_main_content ul {
         float: left;
         list-style-type: none;
         border-spacing: 0;
         margin: 0;
         padding: 0;
         text-align: right;
         border-top: 1px solid #f1f1f1;
         height: 243px;
         width: 266px; } /* end #top_main_content ul */
       #top_main_content ul li {
         vertical-align: middle;
         margin: 0;
         padding: 0;
         border: 0;
         color: #686868;
         width: 266px;
         border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
       #top_main_content ul li a { 
         line-height: 26px;
         display: block;
         margin-right: 5em;
         color: #686868;
         width: 266px; } /* end #top_main_content ul li a */
       .indent { padding-right: 1.5em; }
       #top_main_content ul li a:hover {
         background: #cfcf00; 
         color: #000000; } /* end #top_main_content ul li a:hover */
       #top_main_content #rotating { 
         float: right;
         width: 687px;
         height: 242px;
         border-bottom: 1px solid #f1f1f1;
         border-top: 1px solid #f1f1f1;
         text-align: right; } /* end #top_main_content img */
       #default_div { 
         position: absolute;
         visibility: visible; } /* end #default_div */
       #div_a { 
         position: absolute;
         visibility: hidden; } /* end #div_a */
       #div_b { 
         position: absolute;
         visibility: hidden; } /* end #div_b */
       #div_c { 
         position: absolute;
         visibility: hidden; } /* end #div_c */
       #div_d { 
         position: absolute;
         visibility: hidden; } /* end #div_d */
       #div_e { 
         position: absolute;
         visibility: hidden; } /* end #div_e */
       #div_f { 
         position: absolute;
         visibility: hidden; } /* end #div_f */
       #div_g { 
         position: absolute;
         visibility: hidden; } /* end #div_g */
       #div_h { 
         position: absolute;
         visibility: hidden; } /* end #div_h */
       #div_i { 
         position: absolute;
         visibility: hidden; } /* end #div_i */
    </style>
  </head>
  <body>
    <div id="logo_search">
      <div id="logo_container">
        &nbsp;
      </div>
    </div>
    <div id="base">
      <div id="main_block">
        <div id="main_content">
          <div id="top_main_content">
            <ul>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 5</a></li>
              <li><a href="#">Link 6</a></li>
              <li><a href="#">Link 7</a></li>
              <li><a href="#">Link 8</a></li>
              <li><a href="#">Link 9</a></li>
            </ul>
            <div id="rotating">
              <div id="default_div"><img src="images/test_image_main.gif" alt="" /></div>
              <div id="div_a"><img src="images/test_image_a.gif" alt="" /></div>
              <div id="div_b"><img src="images/test_image_b.gif" alt="" /></div>
              <div id="div_c"><img src="images/test_image_c.gif" alt="" /></div>
              <div id="div_d"><img src="images/test_image_d.gif" alt="" /></div>
              <div id="div_e"><img src="images/test_image_e.gif" alt="" /></div>
              <div id="div_f"><img src="images/test_image_f.gif" alt="" /></div>
              <div id="div_g"><img src="images/test_image_g.gif" alt="" /></div>
              <div id="div_h"><img src="images/test_image_h.gif" alt="" /></div>
              <div id="div_i"><img src="images/test_image_i.gif" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

In any case what will happen with this code is when a user rolls over a link (not shown in code), the visibility of the corresponding div will change. All of this renders and works correctly in FireFox, Opera, and Safari. In IE 7 and 6, it works correctly, but does not render correctly.

In IE 7, the images (all 687 x 243) seem to be indented 687 pixels.

In IE 6, there is a lot of trailing border in the links and that is pushing the images below the menu and will then probably have the same problem IE 7 is having.

Thoughts?

Edited to add that I solved the IE 7 problem by removing text-align: right; from the #top_main_content #rotating div. I still have the IE6 problem however.

I have my website at omel.co.cc I have a menu that I positioned absolute, but when I view in a different resolution the menu changes position, I have put a parent div positioned relative but every time I scroll the menu moves which I do not want to, when positioned fix, the position of the menu goes off, on different resolutions and when I resize the window, I have googled these, hope someone could help, or I just did not googled enough?

K...I have an absolutely positioned toolbar in a search tool page.

There are instances where the toolbar (on the left) is longer than the actual (non-absolute) results. When this happens, IE refuses to scroll for the absolutely positioned content!

Anyone know what I can do about this? It's a little...crappy.

MPEDrummer