Vertically Centering Block Links Using CSS

How would I vertically center the
First Cell link within it's own gray background on the
following page?
Test
Page

Cell height is not invalid. It is deprecated and will cause
your page to
fail validation against strict doctypes.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Osgood" <[email protected]> wrote in
message
news:[email protected]...
> Dont use height on your td cells, it's invalid mark-up
and will cause you
> issues. Set the height on the 'a' by using either
padding top and bottom
> or line-height, as the example below shows.
>
> Cut and paste code below into a new Dreamweaver document
and then run it
> via a browser.
>
>
>
> <!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=iso-8859-1" />
> <title>Untitled Document</title>
> <style type="text/css">
> body {
> margin: 0px;
> padding: 0;
> }
> a {
> font: 12px Verdana;
> line-height: 50px;
> width: 200px;
> display: block;
> background: #CCCCCC;
> text-decoration: none;
> }
> a:link {
> color: #0000FF;
> }
> a:visited {
> background: #999999;
> }
> a:hover {
> background: #999999;
> }
>
> #table {
> width: 200px;
> border: 1px solid #000000;
> }
> .cells {
> text-align: center;
> border: 1px solid #000000;
> }
> </style>
> </head>
>
> <body>
> <table border="0" cellpadding="0" cellspacing="0"
id="table">
> <tr>
> <td class="cells"><a href="#">First
Cell</a> </td>
>
> </tr>
> <tr>
> <td class="cells">Second Cell</td>
> </tr>
> <tr>
> <td class="cells">Third Cell</td>
> </tr>
> </table>
>
> </body>
> </html>
>
>
>
>
>
>
>
>
>
>
>
> rmiman wrote:
>
>>
quote:
Originally posted by:
Newsgroup User
>> Change your cells css style rule to
>>
>> .cells {
>> text-align: center;
>> vertical-align: middle;
>> height: 50px;
>> border: 1px solid #000000;
>> }
>> "rmiman" <[email protected]> wrote
in message
>> news:[email protected]...
>> > How would I vertically center the
First Cell link within it's
>> own > gray background on the following page?
>> >
>> >
http://www.rminc.com/test_examples/test.html
>> When I do that the
First Cell link still appears at the top of
>> it's own grey background.
>>
>

Similar Messages

Add file type icons to links using CSS - DW CSS problem?

Hi,
I want to add file icons to links using CSS. How to do this
is clearly described in the article found
HERE.
A most useful feature I REALLY want to use
However the CSS code shown below is not recognized by DW CS3.
In the CSS Styles window shows "(no styles defined)". HELP!
Any tips/tricks/pointers would be appreciated.

horse.badorties wrote:
> So DreamWeaver CS3 is NOT able to handle CSS 3?
Actually, it has been able to handle most of the CSS 3
selectors since
MX 2004, but it doesn't recognize these:
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E ~ F
Since they're all supported by IE7, Firefox, Opera 9.5, and
Safari 2,
there's a good argument for Dreamweaver to start supporting
them. Why
don't you submit a formal feature request to Adobe?
http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform
There are several others not yet supported by Dreamweaver,
but browser
support for them is non-existent, too. The four listed above
are the
most important.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Centering the layout using CSS as opposed to tables

Hello all...I have spent about 4 hours with the trial version
of Dreamweaver 8 and have solved all but one of the troubles I used
to encounter when using GoLive.
I followed the tutorial in DW8, first building their sample
webpage using a table layout, then using a CSS layout.
The table layout is easy to center, click the body tag, then
select center justification in the Properties Inspector and the
page is now centered in the browser.
However...
I can't get DW8 to do this when building the page with CSS
layers. Should I enclose all of my layers within one main layer and
apply the div align="center" tag?
DW8 is an absolute BREEZE in comparison to GLCS2!!!
Many thanks,
Wordman

A layer in DW speak is an absolutely positioned div.
If you compare my #div code to what you have created - does
yours have
position: absolute defined in the style ?? That's a 'layer'.
Have a read of this article by Murray:
http://www.great-web-sights.com/g_positioning.asp
and this:
http://apptools.com/examples/pagelayout101.php
You may find the css tutorials here to be beneficial:
http://www.adobe.com/devnet/dreamweaver/css.html
Look for the beginner tuts by Adrian Senior
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
CSS Tutorials for Dreamweaver
http://www.adobe.com/devnet/dreamweaver/css.html
"Wordman-GL" <[email protected]> wrote in
message
news:[email protected]...
> Murray...In reviewing the link Nadia provided (Thanks,
Nadia!) I am
> comparing
> her code to the code I generated using 'layers' in the
CSS version of the
> DW
> tutorial website. If I use the Layer command to create a
layer in DW, I
> get
> styles in the head of the document beginning with #,
just as your wrapper
> code
> does. These styles generate when using layers, and they
look damn near
> like the
> styles created in Nadia's code. Are we arguing semantics
calling a 'layer'
> a
> layer, or am I missing something huge here?
>
> I'm barely able to convey what I think is the right
information, so
> although I
> am confused, I am nowhere near as confused as I was with
GL.
>
> All I want to generate are a couple of websites heavy on
photos and light
> on
> text...brochureware. As I'm also a photographer, I'll
want to build a site
> with
> galleries of my work. I have read that CSS is the only
way to go, and I'm
> all
> for it...
>
> So if I shouldn't use the layer command, are you
suggesting just raw
> coding
> instead? If so, why even use DW or GL?
>
> I reallyneed help here. I feel as though I am swimming
with boulders in my
> pockets and am nowhere near recshing the shore before I
drown...
>
> Cheers...
>
> Wordman
>
>

Centering Images using CSS but having links on the Images

Hi all,
I have a problem on centering an image using CSS. I read on many forums that you have to use margin-left , margin-right and set to auto. and also set the display:block which I had done.
The problem is if I want to have a link from the image. Because I have set the display to block, the link will span the entire container containing it! How do I resolve that? I only want the image to be linkable and not the entire container!
Thanks for reading!

Murray *ACP* wrote:
Because I have set the display to block, the link will span the entire container containing it!
That's incorrect. If the display:block is applied to only the IMAGE, the anchor tag will be exactly the same dimensions as the image and will not fill the container.
Hi Murray,
Weirdly it does in my experiments. (code below). Even if I set the 'a' tag to the width of the image it still makes the whole <div> container clickable:
<!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 type="text/css">
#imgWrapper {
    width: 900px;
    margin: 0 auto;
    border: 1px solid #000;
#imgWrapper img {
    margin: 0 auto;
    display: block;
</style>
</head>
<body>
<div id="imgWrapper">
<a href="http://www.bbc.co.uk"><img src="slice_2.jpg" width="595" height="130" /></a></div>
</body>
</html>

Displaying linked pages in an area of the screen, using CSS?

Imagine that I have a column on the left of the page that has a list of links to other pages. When you click on any of those links, then to the right the linked page is shown.
I know how to do this with frames, but I'm trying to figure this one out using CSS.
Can anyone point me in the right direction?
Below is a code sample that if your save and then view in a browser will show you (hopefully) what I am trying to achieve.
<!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>Test site</title>
<style type="text/css">

div.header {
height:4em;
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF;
div.sidebar {
width: 15em;
float:left;
text-align: left;
border-bottom:0px;
padding-top: 1em;
padding-right: 1em;
padding-bottom: 1em;
padding-left: 0em;
    background-color:#390
div.footer {
width:auto;
border:0;
padding:0;
text-align:center;
background-color:#6CF
-->
</style>
</head>
<body>
<div class="header">
   header goes here
</div>
<div class="sidebar">

   Link to page 1<br />
   Link to page 2<br />
   Link to page 3<br />
   etc...<br />
</div>

This is the area where the pages linked to should be displayed.<br />
So, if you click on the "Link to page 1" link, to the left, the contents of page 1 will be shown here.<br />
If you click on the link to the left that says "Link to page 2" then the contents of page 2 will be shown here, etc.<br clear="left" />
<div class="footer">
footer goes here
</div>
</body>
</html>

Thank you Nancy! Your solution is (I believe) 99% of the way to being exactly what I want.
The code fragment below:
<div class="sidebar">

   <a href="../Test/About.html" target="Frame1"> About</a><p>
   <a href="../Test/FAQ.html" target="Frame1"> FAQ</a><p>
   <a href="../Test/Contact.html" target="Frame1"> Contact us</a><p>
</div>
<iframe name="Frame1" id="Frame1" src="../Test/About.html" height="auto" width="auto" allowtransparency="true" border="0" margin="0" scrolling="auto" > </iframe>
but I want the window that contains the 'imported' code to expand to be the same height as the sidebar and wide enough to stretch to the rightmost side of the visible screen.
I was guessing that
height="auto" width="auto"
would have done the trick, but it would seem not. Any ideas?

Why is vertical centering still such a challenge?

Is it really still this tricky to code DW to allow easy vertical centering? Just wondering. Tools for web design have been around long enough, and yet, simply vertically centering an image remains... elusive. Sure - if you know exactly how to do it, or remember it, or figure it out.... sometimes I can get it to work with relative ease; other times, not so much.
Really, though - no vertical center button anywhere? (I may have missed it.)
Now, I admit, I have some homework to do; in the mean time, though, is there any guide someone can recommend?
I'd like to both center divs vertically as well as center their content vertically, and not necessarily both at the same time... preferably using css.
thanks,
Andrew

as to why this is this case is presumably because as the width of an element shrinks, margins-top and position-top and height are contingent on that allowed width. But margin-top and margin-bottom by default are set to auto. This may make it seem like vertical alignments should occur naturally, but it does not. This is because behind the scenes auto is converted to 0. Meaning that Height auto is automatically set to 100% of its containers height leaving no room for margin-top or margin-bottom. Vertical formatting of block level normal flow elements, relies on a calculation much like horizontal formatting. margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom must equal its parenting elements height. However if you use absolutely positioned elements, then if all three of 'top', 'height', and 'bottom' are not auto: If both 'margin-top' and 'margin-bottom' are 'auto', solve for top+ margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom +bottom must equal its parenting elements height. Therefore, margin-top and margin-bottom will be equal values thus vertically centering the element.

Vertical Centering of a page in GoLive

I need a help in vertical centering a page. After long trials and with the help of others in this forum I was able a website that is functioning well enough. The only concern is that it needs to be centered vertically. You can see the website on: http://www.chimeddorj.com
I read the tutorial on the following link, and I liked the 3rd method.
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
But it was too complicated for me as I don't use GoLive often enough. I made this website 3 months ago and since then I haven't used it again. As a result I kind of forgot a lot of things that I knew at that time. If you know how to make the Vertical Centering, could you please guide me how to place the codes in right places? I could provide you with necessary files if necessary. You can also see the HTML code sources by clicking the right button on the website that I created.
For some people it may be easy as click. Please help me if you can.

Thank you very much for comment. I tried to use the table method with your codes. It is centering the content horizontally, but not vertically. The contents are stuck to the top as I resize the window. It seems like I am missing some point. I copy and paste my current code. Could you please give me more advice?
<!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" />
<meta name="generator" content="Adobe GoLive" />
<title>Mongolian Artist Chimeddorj</title>
<script src="js/swfobject.js" type="text/javascript" ></script>
<style type="text/css" media="screen"></style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" height="100%">
<tr align="center" valign="middle">
<td align="center" valign="middle">
<div style="position:relative;width:1060px;height:540px;-adbe-g:p;">
<div style="position:absolute;top:0px;left:0px;width:700px;height:540px;-adbe-c:c">
<script type="text/javascript">
var flashvars = {XMLFile: "paintings.xml"};
var params = {bgcolor: "#ffffff", allowFullScreen: "true"};
swfobject.embedSWF("ArtFlashGallery.swf", "myAlternativeContent","700", "540", "10.0.0",false, flashvars, params);
</script>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a></div>
<br />
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Center 2 lines of horizontal navigation using CSS

I have a long horizontal navigation at the foot of my page
and it looks fab, but it's all aligned to the left. How do I center
everything so the second line is centered below the top line?
Applying the BLOCK text align:center rule doesn't work - tried it
on all the various rules (the div itself, ul, li, a etc).

Your page throws a js error for me when it loads.
Error: MM_preloadImages is not defined
Source File:
http://www.friendsofwoodhousegrove.co.uk/friendsnew/index.htm
Also, you are using filenames that contain spaces that are
NOT Server
encoded....
<link href="CSS files/images.css" rel="stylesheet"
type="text/css" />
----------------------^
Why don't you fix those and post back?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Cactus Woman" <[email protected]> wrote in
message
news:eujcmd$seo$[email protected]..
> Hi Murray,
>
> This is the url:
>
http://www.friendsofwoodhousegrove.co.uk/friendsnew/index.htm
>
> The navigation I'm trying to centre is at the bottom
over the background
> image. I've done 2 unordered lists, one following the
other, because if I
> do
> the long list as one list some of the page titles start
to double up on
> themselves.
>
> Thanks
>

Is there any way to block those 'onload' css/div popups?

It is becoming increasingly apparent that website authors don't understand (or don't care) why popup blockers were invented in the first place; it's because people don't like crap popping up in their face. As such, they're getting around traditional popup blockers by using css/div windows. (Sorry, I'm not a web programmer, so don't know exactly what they're called.) And I'm talking about the 'join our community' or 'fill out our survey' kind of BS. Apparently, just showing a little window on the lower right side isn't good enough for a lot of sites. Anyway ...
I've been using the adblock plus element hider to block these on a site-by-site basis, but not only is this a pain, but it also doesn't work when the window is modal (as in, when the background goes dark and waits for you to close the window). Thus, I was hoping maybe there was an extension or something out there that would do it automagically.
If not, I really think Firefox and other browsers should expand their popup blockers to include these. In fact, better to disable any features that allows windows or anything else to be shoved in the users' face when a page loads, as it is obvious at this point that people who build websites (even the legitimate ones) cannot keep from abusing this functionality.

''worknman wrote:''
I was hoping maybe there was an extension or something out there that would do it automagically.
Subscribe to Fanboy's Annoyances list for Adblock Plus.
* https://adblockplus.org/en/subscriptions
''worknman wrote:''
I've been using the adblock plus element hider to block these on a site-by-site basis, but not only is this a pain, but it also doesn't work when the window is modal (as in, when the background goes dark and waits for you to close the window).
It does work, provided you block the correct element. If you continue having trouble after subscribing to Fanboy's Annoyances, post the link to the site and the part of it you want blocked on either Fanboy's forum or the Filters for Adblock Plus forum.
* https://forums.fanboy.co.nz/forums/
* https://adblockplus.org/forum/viewforum.php?f=2

Black blocks, links not meshing?

Does anyone recognize the following complaints about my website
<http://www.vischmarktpapierentheater.nl>
I found that the links did not mesh with the text in your page:
http://www.vischmarktpapierentheater.nl/Sept 2006/The Magic Flute.html
Where it says ". . . the graphics you may download [HERE] . . ." there is no indication of a link, but at [ou may dow] our Netscape 7.1 browser shows a link to:
. . . . /The Magic Flutefiles/Instructions1.pdf
And, our browser programs fail to print the . . . /The Magic Flute.html page the way they display it on the screen. Netscape 7.1, Mozilla 1.4.1, and Firefox 1.0.5 all create black blocks over parts of your text, and don't proceed to a second sheet to include all the text.
Now what?
Harry

Harry
Your page renders fine in Safari 2.0.4, Firefox for Mac 1.5.0.7, Firefox for PC 1.0.7, IE for PC 6.0.2, Firefox for PC 1.5.0.7.
Printing is another issue entirely! Because of how iWeb heavily uses CSS for correct rendering of the page, when you print, you lose this styling, so printing directly from the browser is always going to give unpredictable results.
There are several workarounds.
1. You can embed the CSS within the web page itself (requires post-publish changes).
2. You can ask your visitors to Print > Save as PDF within OS X and then print the PDF itself (won't work for windows visitors).
3. You could save the page yourself as a PDF then include that as a download link on the page itself.
Michael
iMac 20" Intel Core Duo 2GHz

How do I scale a lot of images using CSS in HTML5 and CSS3

I have a CSS image gallery that displays a larger photo with descriptive text below it, when a thumbnail image is hovered on.
Each photo has code like that following:
<a class="thumbnail" >
<img src="thumbs1/paradethumbs/DSC_0073.jpg" alt="thumbnail picture" />
<span><img src="pics1/paradepics/DSC_0073.jpg" alt=" " /><br /> 19 - a black faced sheep.</span>
</a>
The first source is a thumbnail, image stored at a size of 72 by 48.
The second source is an image stored at 600 x 400.
When the thunbnail is hovered on, the larger photo is displayed at its full size using css.
There are 20 or so thumbnails in this gallery, and different numbers in other galleries that use the same code.
The example above is number 19 from 20.
This works fine on tablets and larger displays.
When I wish to show it on an Iphone or similar, with a display that is 480 or less wide, I need to scale the larger photo down to 300 wide.
As the Iphone will have a lower quality of image than a larger display, it will not matter too much if the 600x400 photo is scaled down, and having tried it by giving it an ID with CSS like
#imagescale{ width:300px; } it looks acceptable. However, as IDs are supposed to be unique, then thats a no go area for the remaining photos.
My problem is how do I select the second image source shown in bold above, and scale it and the span text by 50%.
The text is not too important as it can be changed to fit - the image is the main problem.
I need someting like "if the display is less than 600 and the image is in the pics directory, display it at 300 wide".
The browser will hopefully take care of the height.
Any suggestiosn would be appreciated.
Howard Walker

Thanks Nancy. The general idea and the link to the article helped a lot.
However, the css using using a percentage had unpredictable results when selecting repeated images.
The first one scales to 50% and then the next scales to 50% of the last one (25%) and so on ad infinitum, unless you click on another object that is not an image.
Using a pixel size like 280px rather than a percentage did the trick, but it also involved changing lots of other items before I could get everything to fit.
Now I have a better knowledge of media queries and how to set them up.
Best of all, all my image galleries work fine just using css and html. Never thought that would happen.
Take five stars!
And the same to David Powers for his great article.
Howard Walker

How to link a css file in the xsl file

Hi
           I would like to know how to include link to my .css file in my .xsl file.
The scenario here is I want include a background color in my ShowForm.I am trying to do the same using css.
This is the code snippet in my css file
.outerbody {
     background-color: B1C1CF;
This is how I tried to include a link in my xsl file
<link href="/irj/go/km/docs/Testing/MyNewsDemo/css_test.css" type=text/css rel=stylesheet>

Hi
          Thanks a lot. It would be very helpful if you send me an example.
As of now I have found a solution,I would like to share it here.
I added a link to my css file in xsl:
<link rel="stylesheet" type="text/css" href="/irj/go/km/docs/Testing/MyNewsDemo/css_test.css">
</link>
I replaced the standard class name "body" with my class name "outerbody" specified in the css file.
<body class="outerbody">
Edited by: SRIVIDHYA RAGHUNATH on Feb 25, 2009 11:19 AM

Problem regarding the creation of Table using CSS.

Hi ,
Here I have a Problem regarding the creation of Table using CSS.
In My Application i have a table with multiple rows(Rows are Dynamically added to the table).First i am setting the table with the following properties:
width:900px;
height : auto,
Overflow : visible,
Max-height: : 200px.
If I use above properties,I'm getting a table with 5 or 6 rows(height upto 200px).After that i am getting the Vertical ScrollBar.
The problem is when a table has many columns, Vertical and Horizontal Scrolls are coming at the time of setting the table. The table height is not Increasing dynamically.
How can i use "height" property in CSS? (I want the table height to be increased when the columns are more.)
Thanks & Regards
Madhavi

Hey humble user. Errr I'm trying to understand what ur trying to do. U want to create a section of a region destructively from an existing region right? If so select the option convert to new region (opt-comm-R or selecting it by right clicking). Check your audio bin to make sure. Whats the "merge" function? Are u refering to the glue tool?

Using CSS and Javascript to display a div with flash in it, mozilla reloads the flash file!

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

I am using CSS and Javascript to display a div with an
embedded flash object in it. Mozilla Firefox reloads the flash file
when the div is displayed! (I dont want this to happen, as it's
unexpected functionality, my expectation would be that the flash
file would not change it's state at all, and would remain in
whatever state it was left in.)
I was wondering if anyone has come across this issue and is
there something I can do to prevent this from occurring?
To be more specific, I have a single HTML page with 8 flash
files embedded in it (yeah I know, it's a bit much). I am then
using CSS and Javascript to display (via a numbered link (with an
id)) an equivalent numbered div tag containing the flash file.
Mozilla Firefox reloads the flash object that is in the div.
Internet Explorer will not do this and will instead, load the flash
object only upon initial view of the flash object. All subsequent
links (in IE) will NOT reload the flash object on the page. I'm
guessing this is some kind of difference in the flash player as an
Active X object and the plugin, or is it just IE being clever? Or
am I way off?
Anyway, here is the code...

Resizing image using CSS - not working in IE

Hello,
I have a standard report with couple of columns one of which a image column. The images are of varying sizes and I manged to resize them to a fixed width & height by using CSS code in page header as below:
td[headers="ITEM_PICTURE"] img {
display: block;
width: 70px;
border: 1px solid #999;
padding: 4px;
background: #f6f6f6;
}The CSS does the trick in Chrome & Firefox but does not work in internet explorer. Is there a way to make this CSS code IE friendly?
Cheers for help.

William Wallace wrote:
I am using Apex 4.2.1 (had this issue in 4.1.1 as well) and using theme 10.Ah, the Sludge Sand theme. In 4.x that's a legacy theme only really included to allow applications to run on IE6. It's therefore intended to run in quirks mode, meaning in Internet Explorer terms there's no support for anything that didn't work in IE6 (for certain values of "work"). This means no CSS3, no support for a lot of useful CSS2.1 stuff (like attribute selectors), and probably problems with jQuery which requires standards mode. Adding a DOCTYPE to the page templates to trigger standards mode Interactive Report: how can I display carriage returns?. In 4.2 you really should switch to one of the latest Standard themes, or at least one of the standards mode Legacy themes (those not marked with a "*").
If you must use theme 10, and there are no other images in this report (like edit icons) then you could add a static ID to the region and use a more basic selector like:
#static-id td.t10data img {
display: block;
width: 70px;
border: 1px solid #999;
padding: 4px;
background: #f6f6f6;
}However, it appears that one of IE's quirkier quirks mode quirks is that CSS padding is not supported on images, so the presentation you want is not possible using theme 10 in IE and CSS alone.
Switching to a modern theme is recommended.
Edited by: fac586 on 02-Mar-2013 10:31

Vertically Centering Block Links Using CSS

Similar Messages

Maybe you are looking for