CSS - Embedded Svg Positioning

basically i want them to hover over the image and the tool tip pops up.. it works awesome in firefox(of course) but does nothing in IE.

also for testing i made a link tool tip and it works in IE but its cropped horribly.

you can check it out by looking he

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=9726504

heres the style classes:

Code:

a span 
{
   display: none;
}

a:hover span 
{
  position: absolute;
  display: block;
  background: grey;
  border: 1px solid black;
}

a:hover 
{
   color: 000000;
   background-color: grey;
   text-decoration: none;
   font-size:16;
}

heres the div placement:

Code:

<div class="aim">
<a>
<img border="0" class="" src="http://mattwild.com/media/graphic/aim.gif">
<span>allaimnamesRused</span></a>
</div>

by the way they are the two buttons "add my aim" and "add my msn" and the link underneath them

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.

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.

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.

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.

Hi,

Not sure if I'm posting in the right area, but here goes.

I'm trying to learn how to send HTML emails, and as I'm in the process of revamping our website using only CSS (no tables), I wanted to format the emails in the same way.

I've created 2 html pages in Dreamweaver - in one, I linked to my stylesheets, and in the other I copied and pasted the contents of the stylesheets and embedded them in my html page. The incorrect result described below is exactly the same for both.

In Outlook, following instructions I found on Macromedia's website, I created a New email, did Insert -> File, clicked the dropdown arrow beside the Insert button, and clicked Insert As Text.

It inserts the images fine, so obviously it's finding the path I've specified (I have alternated between using an absolute path and using a relative path and a base tag) but the layout is completely wrong, eg. the 'LeftPanel' which I've specified as :

#LeftPanel {
position:absolute;
top: 105px;
left: 5px;
width: 190px;
height: 400px;
border: 1px solid #000033
}

is taking up the full width of the email - basically everywhere I've set a specific width/height are not being displayed as specified at all. I've used a browser to view the work I've done on the revamp of the actual website and everything is exactly right, so the stylesheets are working correctly in that context.

Anyone any ideas what the problem is?

Thanks a lot,
J.

I'm building a cms system, and want to implement a template designer. I'm after a wysiwyg app that can be embedded into a php application that can present a colour chart to the user, and when they click on a colour it generates a hex code. If possible i'd like it to be able to be implemented into a form.
anyone ever heard of such a program? anyone even know what this type of program would be called?
Thanks!

Like it says, can you make an embedded video like a YouTube one fit to a certain shape you have on a site? Because I am wanting one shaped like a spider pic I have on a profile of mine on a site.

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.

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

Hi,

I have been beating my head against the wall here. My video position in firefox shows up over top of my other nested divs/classes.

www.binaryshopper.com

The site renders perfect in IE. When you spend more time on CSS than programming, something is wrong!

I love CSS but it still doesn't do what it was intended to do. After years of CSS, you still have better control over layout using crappy tables!!

Can someone please help me here before I start shooting Firefox developers?

I'm making a page in which three elements are embedded:

The first is a weather.com "current weather" widget, which is as follows:

Code:

<script type="text/javascript" src="http://voap.weather.com/weather/oap/USVA0023?template=TRVLV&par=3000000007&unit=0&key=twciweatherwidget"></script>

It always aligns left, despite the div it's in having text-align: right set. How can I get it to center?

The other two are iframes, like so:

Code:

<iframe src="http://www.g4ilo.com/wwv/webprop.php?format=small" width="180px" height="268px" frameborder="0"></iframe>

They work fine, but don't validate (using 4.01 Strict). What is a way to get the same content in a valid block that I can style and place as I wish?

EDIT: Now that I look at it, this probably would fit better in the HTML forums. My apologies.

Hi,

I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line.

I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other!



My page code:

<div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1>
</div>



My stylesheet code:

#garden-designer-title {
position:relative;
left:0px;
top:0px;
padding: 0;
margin: 0;
width:526px;
height:51px;
z-index:7;
}

#garden-designer-title a {
position:relative;
font-size: 46px;
font-family: verdana, arial, helvetica, sans-serif;
color: #009999;
font-weight: normal;
text-decoration: none;
}

#garden-designer-title h1 a {
display: inline;
font-size: 29px;
font-family: verdana, arial, helvetica, sans-serif;
color: #9482A4;
font-weight: normal;
text-decoration: none;
}

Does anyone know what I'm doing wrong?!

Many thanks!