|
CSS - Safari Bug For Image Placement
Hello,
My home page works fine on all browsers and platforms except safari. http://www.caillouette.com/EoLtest/ The two buttons below the main nav should be above the big blue "Request Information" button. Can anyone help? thanks -S Similar TutorialsThis afternoon I could finaly continue working of a menu bar. First I did use Table's but after reading a CSS guide ( E. Meyer ), I could change that with a ul/li and CSS. I have floating on the left side: / spacer / two icons / spacer / ... / set of centered links / ... / and floating on the right side / spacer / form fields / Here my CSS Code:
#footer {
clear: both;
padding: 2px 0px 10px 0px;
font: 11px arial, helvetica, sans-serif;
width: 100%;
overflow: auto;
text-align: center;
border: 1px solid;
/*min-height: 23px;
max-height: 32px;*/
position: absolute;
bottom: 0px;
left: 0px;
height: 25px;
}
#footer li.img {
padding-left: 4px;
padding-right: 4px;
float: left;
}
#footer li.spacer {
min-width: 6px;
float: left;
}
#footer li#spacerLeft {
margin-left: 8px;
float: left;
border-left: 2px #ddd dotted;
}
#footer li#spacerRight {
border-right: 2px #ddd dotted;
margin-right: 8px;
float: right;
}
#footer li#txtSelector {
margin-right: 10px;
float: right;
}
#footer a {
clear: both; margin: 0 0 ; height: auto;
}
#footer ul {
text-align: center; margin: 0 0 ; padding: 0; list-style-type: none;
}
#footer li {
padding-left: 3px;
padding-right: 3px;
display: inline;
min-height: 23px;
width: auto;
}
#footer input {
font-family: Verdana; color: #333333; font-size: 7pt;
width: 80px;
}
This with my HTML Code: <div id="menu_container"> <div id="footer"> <ul> <!-- spacer --> <li class="spacer"> <!-- icons --> <li class="img"><img src="comment.gif"> <li class="img"><img src="feedicon.gif"> <li id="spacerLeft" class="spacer"> <!-- links --> <li class="link"><a href="/">Inline test</a> <li class="link"><a href="/">home</a> <li class="link"><a href="/">web</a> <li class="link"><a href="/">Simple more links</a> <li class="link"><a href="/">Simple, even more links</a> <!-- input search field --> <li id="txtSelector"> <form action="search.php" method="post"> <input type="text" name="search" value="Search Here" size="20" >; </form> <!-- spacer --> <li id="spacerRight" class="spacer"> </ul> </div><!-- footer --> </div><!-- footer container --> I am close, with what I want. But If I use this in Safari, it crashes when I make my window small. On FireFox the input field is not in line with the other items. If I the window is to small to show them all, I would love to have the middle li items wraps under them selfs. like: link link link link one two three four and not link one link two link three link four This did work in my table test, but not here. I did have it one time, but I think it was by accident. Does someone have any clue? Thanks Hi, I am trying to line up a few images at the top of this page: iamthelab dotcom The 2 rectangles need to be aligned to the top of the page and I can't for the life of me figure out what I am doing wrong. I'm sure the solution is simple. No help from other forums, maybe you guys can assist. Thanks! How can I best place Image maps with CSS? It seems the text placement command works, but I don't know whether that's the best way. Here's a test page I threw together which uses this command to place the image map: http://www.gamexplain.com/test2.htm So is there a better way? How should I format the command? Thanks! Hi, I'm trying to achieve the raised/gradiated background effect you'll see on the following URL (scroll halfway down the page) csszengarden Kyoto version (sorry, since I'm a new user I can't provide a direct URL) with an image gradient repeated on the y-axis. It is difficult to give an example of the image without being able to attach and image here. I've tried so many things I've forgotten my own name. Please let me know if there is any more information that I can provide. Thanks! hi, i'm trying to add an outer glow image to my site, starting about a 100px from the top. when i use padding on the element i'm adding the trim to, the entire site including the banner shifts down. so i tried using background position, which works until i add repeat-y, which causes it to repeat in the 100px where i don't want it. is there a way to make an image only repeat down? I'm aware that there are several threads addressing the issue of image placement, but I'm unable to find anything referencing the specific issue I'm having, so I figured I'd ask... Let me first say that I am a professional martial arts instructor, not a web developer. What I do know how to do is completely self-taught. Bearing that in mind, I've discovered a relatively minor issue with our site, and I'm curious as to input here. Blue Mountain Martial Arts You will notice two "bamboo sprigs" in the upper right and left hand corners of the page. It took me quite awhile to get these to the actual edge of the browser window, but it seems that what I did was almost too effective. When viewing yahoo's cache of the page the bamboo is still in the upper corners of the browser window, rather than still lined up with other page elements. Google's cache for some reason places the left bamboo in the middle of the page. This is also an issue when the browser window starts "small", and is then maximized. The images in that case do not re-align, and thus will stay where they originally loaded, which may be in the middle of the page. I'd like prospective martial arts students looking at our studio to be drawn in, rather than driven out by a malfunctioning website. Most of the time, the site works fine, but I'd like to make that 100%. Input...? What should I change to have the images load on the edge of the screen, but reposition themselves relative to the other page elements if necessary? Friends, I am trying to provide a 'Print' functionality on my HTML page. The idea is to have a small print icon appear on the left side, followed by the words 'Print'. On clicking on the 'Print' link a popup window should open. The popup etc. works fine. How ever the word 'Print' is over-lapping the 'printer' image. The printer image comes up but the word 'Print' comes right on top of it. How can I place the printer image, and the word 'Print' on its right side? This is the current peice of CSS code I have written. What could be wrong in it? Code:
.linkprint
{ background-image: url('/abc/kap/com.ahj.wpc.layout/images/icon_print.gif');
background-repeat:no-repeat;
text-align:right;
margin-right: 10px;
font-size: 8pt;
font-weight: bold; }
Hello all, I'm new on this forum, but not that new to Web Design. I am re-working my website that can be found here. What I really want to figure out is how to replace the white box in my #mainContentWrapper class with an image that I made (which I'm going to post at the bottom of this). I have tried to locate examples of this online to try to learn something from those, but all of my efforts have come up short. I have also been able to chage the background image for that element, but I am still left with the white box on top of it. I guess I'm just missunderstanding the CSS box model. If anyone can lend some advice on this subject, I would greatly appreciate it. (URL address blocked: See forum rules) *edit: I can't find the guidlines for posting links to my page and the image I'm talking about so I'll just give you the url. the site is: (URL address blocked: See forum rules) and the image is at: starvingyoungartists.com/contentBG.png Hey everyone, I'm redesigning a site and I'm running into some problems in firefox with the placement of the header-background image. The problem is that firefox places the image about 15 pixels below the intended area. When I add a border of 1 pixel to the header div firefox places the image correctly. I don't have this problem when viewing the site in IE. I've coded the following XHTML and css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ParaCentrumEeldeHoogeveen</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Language" content="nl" />
<link rel="stylesheet" href="css/layout.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
</div>
</body>
</html>
And the css file: Code: html {
padding: 0px;
margin: 0px;
}
body {
background: #3a60db url('../gfx/background.jpg') repeat-x;
font-family: arial, "lucida console", sans-serif;
font-size: 12px;
color: #000000;
text-align: center;
margin: 0px;
margin-top: 0px;
padding: 0px;
}
#container {
border: 0px solid #ff0000;
width: 760px;
margin: 0px auto;
padding: 0px;
text-align: left;
}
#header {
background: url('../gfx/header.jpg') no-repeat;
height: 238px;
width: 760px;
padding: 0px;
margin: 0px;
}
Screenshot of the problem Does anybody know what the problem is? Thanks in advance. Grtz. Arjen I have an image gallery, that when the thumbnail is hovered over a larger image appears. This works fine in Firefox and IE but not in Safari. I have validated my code and css. The gallery is at http://www.briandobson.com.au/sthaust.html Code:
<tr>
<td valign="top">Boat Harbour, Goolwa<br />
75 x 35cm <br />
$720</td>
<td valign="top"> </td>
<td>
<a class="thumbnail" href="#"><img src="SthAust/thumbs/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="200" height="46" />
<span>
<img src="SthAust/Boat-Harbour---Goolwa.jpg" alt="Boat Harbour, Goolwa" width="775" height="248" />
</span>
</a>
</td>
</tr>
CSS is in the head and separate styles.css Code: .thumbnail img {
border: 1px solid white;
}
.thumbnail:hover {
background-color: transparent;
float: left;
}
.thumbnail:hover img {
border: 1px solid white;
}
.thumbnail span {
position: absolute;
background-color: white;
padding: 1px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
display: block;
}
.thumbnail span img {
border-width: 1px;
}
.thumbnail:hover span {
visibility: visible;
background: top;
left: 0px;
z-index: 50;
}
With thanks Angela Hey, If you take a look at the site below - within Apples Safari web browser - you will see how the image on the home page is splintering. ANy ideas? Thanks in advance! I have an issue with an image that just doesn't show up in IE6-8 no matter what I do. I even tried just putting in the url for the image and it still wouldn't show it. I took it into Photoshop to make sure it was properly saved as a jpeg and it is. The file validates (with some minor color warnings). I tried to post the url by putting url tags but that didnt work so here it is obscured mandp dot lamster dot org/contacts dot shtml and the photo alone is at mandp dot lamster dot org / images / MP65APhoto dot jpg Another issue with the url for the page is that I can't seem to get the width of the right pane smaller. Any help would be appreciated. Thanks/Hal I have a site that I have created in WordPress using a pre-designed theme that I heavily customized. http://www.newlivingwaygreenville.org/blog/ The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x. The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others. The image is using inline styles to overcome the limitations of this particular WordPress theme. Code: style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;" Any ideas why this doesn't work right in Safari and what I can do to fix it? Thanks! ks Hey as the topic title says, can I put a background-image on a text input so that it shows in safari? I can't figure it out and can't find anything using google. Anyone have any experience with this? Thanks Hello All, I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer. Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result. How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well? This is how the code is displayed in IE: http://img407.imageshack.us/img407/2360/pfieeu9.jpg Firefox/Safari/Chrome: http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg You can see the little extra "nubbin" of underline between the icon image and the text. CSS: Code:
a.red10ullink:link {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:visited {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:hover {color: #333333;
font-size: 10pt;
font-family: arial;}
img.icon {vertical-align: middle;
border-width: 0px;
margin: 0px 5px 0px 0px;}
HTML: Code: <a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a> Thanks! Below is my html in which I want to embed "legend" 30px to the right of "map". After much playing with the code, I need help. "legend" is pushed underneath "map" in this version. Other arrangments have also failed. If I get rid of the "border" and "leg" div tags, they are placed side by side, but I have littile control over where "legend" is placed. Any insight would be appreciated. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <head> <title>CSS</title> <style type="text/css"> #page {position:absolute;border: 1px solid black;left: 20px;top: 20px;padding-top: 25px;padding-left: 25px;padding-right: 25px;padding-bottom: 25px} #printArea {position:relative;border: 1px dotted black;padding-right: 5px;padding-top: 5px;padding-left: 5px;padding-bottom: 110px} #leg{position:relative;border:1px solid black;width:170px;top:0px;right:0px} .map {position:relative;border:1px solid black} .legend {position:relative;top:0px;left:880:0px} </style> </head> <body> <div id="page"> <div id="printArea"> <div id="border"> <embed class="map" id="map" src="index.svg" width="850px" height="675px" type="image/svg+xml"/> </div> <div id="leg"> <embed class="legend" id="legend" src="legend/legend.svg" width="170px" height="625px" type="image/svg+xml"/> </div> </div> </div> </body> </html> Hi there. I'm working on a page, and I'm a bit confused about how to place my CSS on it. The page has a nutritional search box that will be the primary focus of the entire site. Right now I have only a front page. So currently I have one external CSS file with the CSS for the page layout, along with the CSS to arrange the search box. But now I want to bring up a javascript popup with just the searchbox and another table. I can't use my original external CSS because I don't want the main page naviagation in the popup, nor do I want to copy the CSS for the search box everywhere. What is the correct way to do this? I almost want two external css files. I want to include BOTH files in the main page, and only the file associated with the search box in the popup. But in the reading I've been doing it doesn't seem possible. Even when I try copying the CSS for the search box, Firefox doesn't seem to like me attaching a different CSS file in the popup then I had in the main page. Please help! Or at least point me to a useful article. Thank you! Hi there, I'm having a FF/IE problem! As usual. I have a site up (www.silk-works.com)which thanks to BonRouge and Dan_A has a footer that sits in the correct position, ta peeps. The problem I have now is that - www.silk-works.com/jane/jane.html - I have Images floated right and I want text to appear alongside - which FF handles fine, but IE bumps below the first Image.. Code:
<img src="../photographs/jane01.jpg" alt="" id="containerImageRight"/>
<img src="../photographs/jane03.jpg" alt="" id="containerImageRight"/>
<p>some ample text....</p>
[CODE]
CSS for image placement is;
[CODE]#divWrapper #divContainer #containerImageRight {
margin: 0px 10px 10px 10px;
float: right;
border: 2px solid #6E6447;
padding: 0px;
}
CSS for <p> tag is; Code: #divWrapper #divContainer p {
font-family: "Gill Sans MT", Tahoma, Verdana, Arial, sans-serif;
font-size: 1.1em;
padding-left: 10px;
letter-spacing: 0.05em;
line-height: 1.3em;
padding-right: 10px;
color: #6E6447;
}
Any suggestions greeted with a free ice cream. Regards, James. I'm brand new to CSS and I've been trying to customize a template, but it seems whenever I move the Search bar from the top left into the menu bar on the right side it offsets the placement of other items and I cannot for the life of me figure this out. My website is floydsewingmachines dot com (I guess it won't let me post the actual address?) but any suggestions or help would be greatly appreciated. Thanks! |
|||||||