CSS - Disabling An Embedded Style, Is It Possible?
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 Similar TutorialsHi, 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! One of the websites, that I frequently visit, uses different stylesheet for printing. I want the same (i.e. "screen.projection") stylesheet to be used while printing. I will like to have a bookmarklet that will disable the "print" stylesheet mentioned on the second line in the following example. <style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "/style/main.css"; /*]]>*/</style> <link rel="stylesheet" type="text/css" media="print" href= "/style/commonPrint.css"/> Shantanu Oak shantanuo@yahoo.com I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code: .textarea-box { color: #990000; background-color: #fff; width: 375px; height: 200px; border: #000 solid 1px; } ...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! 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. 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. 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. 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 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. 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> </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. 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. 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'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! 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. 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. |