CSS - Tool Tip In Ie Not Working. Im Using An <img> Embedded In An <a>

I am developing a help manual and I'd love to include screenshots in the CSS section that shows the page with an opaque type overlay with a description of each CSS rule.

Something like the Developer tools in IE or FF when you use the "select element by click" function, except that I'm after all elements selected by default (together with the CSS ID).

Is there such a thing?

http://typetester.maratz.com/

I am not the author, but this is sweet!

I've been using EMBED tags to place SVG images in a web page but I haven't found a good way to position the images exactly where I want them. I've tried every CSS style known to man in the EMBED tag but it doesn't seem to respond much. Go to this address to see an example:

wikiquation.com/builder

This is supposed to look like c^2 (as in E=mc^2). It works great in the newest version of FireFox, but in every other browser both letters are small (only the 2 should be small) and they are spaced very far apart. Like I said, I've tried using CSS to control the positioning but nothing seems to work.

If you have any suggestions or if anyone knows of a better way of placing SVG images, please let me know.

Thanks in advance!
David

P.S. I apologize if this post is not in the best location. I wasn't sure where to post it.

My subject title may be a little off (terminology).
I'm looking for a good resource on embedding 'expressions' in CSS - mostly for learning.
I've lost all my links because I did an Office update on my Mac and somehow lost all my email settings.
I posted in the Mac forum a couple of weeks ago, but to no avail.
So, I'm beginning to build my info up again (damn).
I've seen Pure CSS tooltips, Opacity for IE, Conditional Statements and more, but I can't remember all the things I'd found.
Can someone point me to a good resource on this area of CSS please?
Would be much appreciated.

Hi can anyone tell me if I can override embedded CSS with a linked stylesheet?

Here is what I want to change:
Code:

<col width="40%" style="background-color:#EEEEEE;text-align:left;">

I want to change the background-color without changing anything in the above mentioned code, this means I want to change it with an extern stylesheet.

Hi all. I am in the process of re-coding some beautiful email templates that were pure CSS layouts into nasty HTML nested tables so our clients can still see our newsletter when viewing them in Web based email browsers like Yahoo, GMail, etc. (since these often strip out our CSS sections)

Typically we would define our link styles in CSS using something like: PHP Code:
 a, a:link, a:visited {
        color: #BF28B2;
        text-decoration: none;
        font-weight: bold;
} 



I just realized I am not sure how to represent the same style when using inline styles such as <span style='...'>text</span>. Just what can I do to modify the link styles using inline styles?

Thanks

Hi everyone,

Basically I am working on a yahoo store design, and I have learned through working with Yahoo Store that it is very proprietary and limited in access. They allow me to access external style sheets and some of the layout of the site but I found for a specific tag id that if I alter it's margin value, something in the inaccessible backend creates an embedded style for that tag that overrrides the external style sheet. Yahoo help has been no help because they don't support custom code.

Anyway, I was wondering if there was a way to override or disable an embedded style in general or for a specific tag? I am pretty sure there isn't, but if there is, I would be forever grateful. I would especially appreciate any non-javascript solutions. I think javascript could do the trick but a non-javascript solution would be preferable and that is what I'm looking for.

Thank you anyone who can help out.
-Greg

does anyone know off hand without me posting any code, why my CSS would work embedded in the page between style tags and not referenced with a link tag (<link type="text/css" rel="stylesheet" href="blah.css" />).

this bug occurs in firefox.

OK I have embedded a flash movie and I want no padding at the bottom of the flash object so it butts up with my horizontal menu. I have used the following html

PHP Code:
<td class="flash"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="340" height="140">
  <param name="movie" value="images/movie.swf">
  <param name="quality" value="high">
  <embed src="images/movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="340" height="140"></embed>
</object></td> 





Here is the css I use for the cell:

PHP Code:
.flash{
    vertical-align: bottom;
    text-align:right;
    padding-right:25px;
    background-color:#EBF0F5;
    padding-bottom:0px;
    margin:0px;
} 





But in Netscape and Mozilla browsers there is a 2pixel gap at the bottom of the object ? IE and Opera are ok, does any-one know anything about this ?

thanks for your time.

I've tried sending HTML mail with embedded CSS, that is, CSS that is defined between STYLE tags located in the HEAD of the HTML. However, some e-mail clients, esp. Outlook, don't recognize the CSS.

In order to force crappy Outlook to recognize CSS, I need to use inline CSS.

I really want to keep my CSS defined together by the embedded method since it is easier to modify CSS located in one central source to affect many HTML elements, not by the tedious inline method. Is there a way to force Outlook to recognize my CSS (other than using a link)?

If not, is there a PHP function which can accept a file defining embedded CSS styles and parse a HTML file such that a new file is spat out with the CSS inserted inline? I am thinking about writing a function, but jeez, what a pain when it comes to nested CSS definitions.

Thanks.

So I have an ad that is being served via an IFRAME. The src of the iframe has a few places where I can change colors as the css is dynamic based on the query string. There is one css element that is not supported with the user option to change the color and I want to try and override it.

Obviously inline styles override embedded styles, but the element I need to override is

span.price { color:#990000; }

and that is within the source of the iframe. Is there a way to override this?

I've been trying for the last 2 days to position windows media player in FireFox.

Here is the link: www.binaryshopper.com/test.php

Does anyone know how to place a video correctly in FF? I asked a similar question here, but apparently no one here knows how to place a video using CSS.

First off, I'll preface that I'm not a CSS expert by any means. I've done web development for many years, but have slowed down a great deal over the last few, so never got heavily into the aspects of CSS that completely replace HTML (tables, etc.).

At my current place of employment (where my primary duty is not that of a web developer, thank god), I'm being asked to develop a set of 'templates' using primarily CSS.

I've been using the CSS Sculpter plug in for Dreamweaver, and have had decent results from it, but my main issue at this point is this:

When I take the CSS code from the header of the page and put it into a separate stylesheet and then link to that stylesheet, it jacks up the content portion of the site. It seems to be completely disregarding the right margin of the content div and allowing text to simply run off. When the code (without changes) is pasted back into the header of the page rather than linked to it, the issue is resolved.

Here's the CSS:

Code:

<style type="text/css" media="all">
<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
background-color: #666;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
/* Commonly used to style section titles. */
h2 {
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* Sets the style for unvisited links. */
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
color: #000;
text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
color: #000;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
color: #000;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
background-color: #fff;
border-left: solid 1 px #666;
border-right: solid 1 px #666;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 650px;
overflow: hidden;
}
#outerWrapper #header {
background-color: #ddd;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #topNavigation {
background-color: #ebebeb;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
height: 10px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #rightColumn1 {
background-color: #ebebeb;
border-left: solid 1px #666; /* Sets the left border properties for an element using shorthand notation */
float: right;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #ebebeb;
border-right: solid 1px #666; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px 10px 32767px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin-bottom: -32767px;
width: 14em;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */

}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper .clearFloat {
clear: both;
display: block;
}

#footer {
background-color: #ddd;
width: 650px;
border-top: solid 1px #666; /* Sets the top border properties for an element using shorthand notation */
padding: 10px 0px 10px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
margin: 0 auto 0 auto;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
width: 16em;
}
#outerWrapper #contentWrapper #rightColumn1 {
width: 16em;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->

--------------

And then the page code:

Code:

<body>

<div id="outerWrapper">
<div id="header"><img src="hockley_header.jpg" alt="" width="650" height="150" /></div>
<div id="topNavigation">
<div align="center">Nav </div>
</div>
<div id="contentWrapper">
<div id="rightColumn1"><h2>H2 rightColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p></div>
<div id="leftColumn1"><h2>H2 leftColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
</div>
<div id="content"><h1>H1 Main Content</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. <a href="#">More...</a></p>
<h2>H2 level heading</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p>
<p>&nbsp;</p>
</div>
<br class="clearFloat" />
</div>
</div>
<div id="footer">Footer</div>
</div>

</body>

--------

Like I said, I'm completely out of my element here - learning bit by bit. CSS isn't difficult coming from a programming background, but my troubleshooting abilities are definitely not up to par.

Any help on this issue is greatly appreciated.

Ok, well I have a simple flash movie embedded into my html like this:

PHP Code:
 object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="160" height="199">
<param name="movie" value="images/welcome.swf">
<param name="quality" value="high">
<embed src="images/welcome.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="199"></embed></object> 






And I wish to add this style to it but Im not sure how ?? :

PHP Code:
 img.right { border: 0.06em solid #FF66CC; 
            border-right: 0em solid #FF66CC; 
            border-bottom: 0em solid #FF66CC;
} 





Thanks for your time.

Hello all,

I'm a relative newbie with css, so any help is greatly appreciated. I am trying to come up with some xhtml/css that can appropriately display several images and text inside of an unordered list. For example, say I have this:

Code:

<ul>
  <li>TEXT<img />TEXT<img /><a>LINK</a></li>
</ul>

I am trying to come up with a way that the text inside the <li> tag always is displayed at the same level as the top of the text, if that makes sense. Also, I'd like the list element to be of uniform height and width. Finally, I'd like the second image and link to be all the way to the right of the list element. Here's what I've got so far:

Code:

<ul style="vertical-align: top; list-style: none;">
  <li id="li_1" style="list-style:none;">
    <span style="width:150px; vertical-align:text-top;">1.) 
      <img src="/images/document.png" height="40px"/>TEXT
    </span><span style="float:right">
      <img src="/images/close.png" height="40px" />
      <a href="#" onclick="return false;">[Edit]</a>
    </span>
  </li>
</ul>

Simply put, this currently looks like crap. Any suggestions? Thanks in advance.