|
CSS - Mozilla Image Positioning
I've got the following code written for a web site that I'm supposed to look at moving toward CSS. I'm just begining and am already noticing the discrepancies between IE and Mozilla (Firefox).
Mozilla seems to be separating images larger than it should. I know this is(was) a problem with IE, but didn't expect to see it in Mozilla. Any suggestions? I can supply code and a reference page if needed. Thanks for any help. Similar TutorialsHi, i made this page: http://www.jarra.nl/_TEST/test.htm css file: http://www.jarra.nl/_TEST/mottacss2.css i'd like to have the orange line above "new title" at the same height as the orange line under the gray box. it's like that in IE6 on XP, but it's slightly lower in mozilla on XP. can't seem to fix it ;-) any ideas, thanx a lot !! jarra i am trying to use the suckerfish dropdown menu. starting from the pretty example, i got it going in IE6 but it looked pretty off in mozilla. i tinkered around further the the IE code which changed things a bit there and made things look a bit better in mozilla but not much! my code is at http://www.fizzycherry.com/menutest.html - i would *really* appeciate any ideas. the main things really bugging me a how can i get the menu bar to fill the width of the screen in mozilla? my navbar div did this before i inserted the sub menus! once i tinkered with my css, placing padding on the links rather than the li elements, huge vertical gaps started appearing in the submenus in both IE and Mozilla, even with no margins padding and borders. i need to *add* a bottom border (same colour as background) to remove these gaps! why?? ideally i would like the submenus to look somethign like they do in ie6 but even if someone could just tell me how to make the bar fill the screen i'd be chuffed! Hello friends, I have created this page http://www.geocities.com/axe_42k1/index.html with html and css its working fine with IE but in mozilla firefox, images in center are overlaping on right side images and no round border to themplease help me to solve this problem and i want to insert link to top left hand side image how can i do it with css?. Ok the problem is hard to explain but here it goes: I have news items that are divs, inside that div i have a floating left image, then i have the news content. The problem comes when I view it in Firebird. It seems the next news item starts at the bottom of the floating image. This causes serious problems with the text. I tried this .clear css style: clear: both height: 0 line-height: 0 but it just seemed to help with one (bringing the second one below the bottom of the page). Does anyone know what might be the problem? Here is the link: http://www.cjweed.com/porttest As you can see IE displays everything like a champ, mozilla likes to mash it together. Please help Code: <style>
<!--
BODY{
cursor:url("Hand.USA.cur");
}
a, a:hover {
cursor:url("Hand.USA.cur");
}
-->
</style>
I'm using the above code to display an icon that is replacing the default arrow. This only seems to work in Internet Explorer 6+. Would anyone know another way to display an image or icon either through a url (http://www.blah.com/img.jpg) or .cur or .ani that will work in Mozilla, and Netscape ? Thanks, Shawn Hi, I'm using html:link with a background image. This works fine on IE and Firefox, but the link won't show in Mozilla. Could changes to the css fix this? Does anyone know how to solve this? Regards, Nina please look at this link http://sudhakargolakaram.co.in/image.html my question is how to place the image which has a curve design starting from the left till the right along with the 3 square images in between keeping this image aside the width of the wrapper is 825px which is fine the 1st div after the wrapper has content within the dark green at the very top and its width is the same as the wrapper which is 825px and the div after this are also 825px in order to have this curve image whose width is 1204px and height 266px as the 2nd div is what i need help with as of now my code is #wrapper { width: 825px; margin: 0 auto; } #contentwrapper{ float: left; width: 825px; height: 1900px; } #toprowouter{ float: left; width: 825px; height: 25px; } #menu{ float: left; width: 825px; height: 57px; color: #fff; } and code for other divs just for the sake of this 1 image with 1204 X 266 i guess it is really not needed to change the wrapper to #wrapper{ width: 1204px; margin: 0 auto; } and there after all the other divs will need to have a width of 1204px and i will have to apply padding on left and right to a container div so that the actual content will have a width of 825px how is it possible to have the image with 1204 X 266 sit inside the wrapper whose width is set to 825px or should i change the wrapper width to 1204px just because of this big image please provide the code for this thanks. In the code below, why is the image not positioned at the very top of the DIV in IE only (seems to be fine in FF)? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.test {
width: 200px;
height: 100px;
border: 1px solid #003366;
}
.image {
position: relative;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="test">
<img class="image" src="images/block_up.gif" width="11" height="11" border="0" alt="">
</div>
</body>
</html>
Here is the website i am struggling with, http://www.richmondsproperty.co.uk/ . i am trying to place a linked image in the top right corner, above the phone number without moving anything else. I tried to put it in a div and use float right but it just pushed everything else down. Here is the code being used Code: <div id="header">
<div id="header_logo">
<a href="<?php echo base_url(); ?>"><img src="/public/images/logo.jpg" alt="Primmer Olds logo" /></a>
</div>
<div id="top_menu">
<ul>
<li><a href="<?php echo base_url(); ?>" <?php echo ( uri_string() == '' ? ' class="down" ' : '' ); ?>>home</a></li>
<li><a href="<?php echo base_url(); ?>about-us/" <?php echo ( preg_match("/\babout-us\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>about us</a></li>
<li><a href="<?php echo base_url(); ?>why-choose-us/" <?php echo ( uri_string() == '/why-choose-us/' ? ' class="down" ' : '' ); ?>>why choose us</a></li>
<li><a href="<?php echo base_url(); ?>lettings/" <?php echo ( uri_string() == '/lettings/' ? ' class="down" ' : '' ); ?>>lettings</a></li>
<li><a href="<?php echo base_url(); ?>news/" <?php echo ( preg_match("/\bnews\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>news</a></li>
<li><a href="<?php echo base_url(); ?>community/" <?php echo ( uri_string() == '/community/' ? ' class="down" ' : '' ); ?>>community</a></li>
<li><a href="<?php echo base_url(); ?>home-sale-network/" <?php echo ( uri_string() == '/home-sale-network/' ? ' class="down" ' : '' ); ?>>home sale network</a></li>
<li><a href="<?php echo base_url(); ?>contact-us/general/" <?php echo ( preg_match("/\bcontact-us\b/i", uri_string()) ? ' class="down" ' : '' ); ?>>contact us</a></li>
</ul>
</div>
</div>
Code: #header {
margin: 0 auto;
text-align: center;
padding: 0;
width: 980px;
height: 166px;
background: url(/public/images/header.jpg) no-repeat bottom right #e6e6e6;
}
#header_logo {
float: left;
margin: 0 0 0 0;
width: 166px;
height: 166px;
background-color: #dc006c;
}
#header_logo img {
margin: 0;
width: 166px;
height: 166px;
}
Any help would be appreciated, thanks! I'm new to CSS. What is the best way to position an image? I tried using this: #image { position: absolute; top: 234px; left: 567px } But for some reason it doesn't work...How can I position an image? Thanks PS another thing that's been bothering me is when do you put: (in the external stylesheet) .image {..... } when do you put #image {...... } and when do you put *#image {...... } What's the difference between them and what circumstances do you use them in? Is this possible with css? I have a single table cell thats 100% wide. I want an image left aligned, an image right aligned and a background image spaning the entire cell. I also want to type text into the cell between the two images. Using html I get bugs in IE so I think css might be the better option? I have the following Code:
<td rowspan="2">
<img class="gallerypic" name="<?php echo $pic['filename']; ?>" src="pictures/thumbs/<?php echo $pic['filename']; ?>" width="<?php echo $pic['thumb_width']; ?>" height="<?php echo $pic['thumb_height']; ?>">
</td>
<td>
<div class="header">Caption</div>
<div class="captionText">CaptionText</div>
</td>
I want the two div's to be positioned at the top of the TD they are in. I tried all different positioning stuff in thee CSS for their classes. What am I missing here? I really hate CSS sometimes. Do I need to style the TD to get this working? I am building a site and using CSS selectively where I need to control positioning. The site is tapmytrees.com I am having an issue controlling the positioning of the "Add This" image at the footer of the page. I am able to position this right, center, or left, but other than that, have no luck. Currently I am using the following code: #divAddThis { text-align:center; } I am able to use this code to control the positioning of the line below this image: #divLive { float:left; /* moves to right in footer*/ left:-24px; /* adjusts position */ position:relative;/*needed for left and bottom to work*/ text-align:left; /*align text*/ bottom: 5px; /*move up a bit off the search line*/ } When I try to apply the same code to #divAddThis, it has no effect. In fact, using code similar to #divLive, it does not even show up when viewing the results in FireBug. Any suggestions are appreciated. Thanks. HTML -- CSS I decided my last layout looked like poop so I'm changing it. In FF the center logo fits right in the middle of the background image to give it a stretching effect. In IE the image is slightly above the baseline. (maybe 3-5 px) Any help here? I'm working inside of a classifieds software app and trying to position a button inside an area that I don't have access to the raw HTML. I built the image file and I know where I want it to appear on the page, but don't know the correct parameters to put in to get it there. I would like it to find the center of the page then go left 190 pixels and be about 400 pixels down from the top. Site is http://www.ineedihave.com. I am very new to web design. I had an old friend of mine design this website for me: directdevelopmentinternational.org I am now trying to use what he did for that website you put together my bands website: throughtheconcreterecords.com I am trying to get the navigation bar to sit inside of the blank white box I have created in my header image. I also just want the text to be black and maybe when highlighted change to a different color. I also am trying to make it so when you click the burning book logo in the upper left corner it brings you back to the main page. I am having a terrible time figuring out how to do this as I am not sure what all of the different techniques are referred to. Any help at all would be much appreciated! I'm sure it's something stupid and obvious, but could someone tell me why this works (h1 goes away and image is seen): #branding { height: 100px; position: relative; z-index: 10; } #branding h1 a { position: absolute; top: 16.5px; left: 293px; width: 214px; height: 67px; text-indent: -9999px; background: url(../images/branding.png) no-repeat; } and this doesn't (h1 goes away, but no image swap): #nav_main { position: relative; z-index: 2; height: 50px; } #nav_main h2 { position: absolute; z-index: 6; top: 0; left:0; height: 120px; width: 800px; text-indent: -9999px; background: url(../images/nav_mainh2.png) no repeat; } I'm trying to be a good forward-thinking web designer and am giving the xhtml/css design thing a try with the site I'm currently building. The challenge is to do the whole layout without using a table, but I'm having a hell of a time. You can see the site now at: http://epoch.pursuedbybear.com - currently, I've got the header and footer table-free, but it's the main content area that's giving me trouble. It's using a table right now, since that's so easy, but I'd like to fix that. Here's what I want: the page is 750 pixels wide, centered. I would like the text to be on the left taking up about 400 pixels, with the margins it currently has. I would like the image to be on the right, aligned to the very edge of the header and just underneath it - no gaps. I would like a 1px black border on the left and right. I can ALMOST get there with CSS, but everything I've tried has put the image slightly off (typically not flush against the header or after the text entirely). - you can see my latest efforts at http://epoch.pursuedbybear.com/page2.shtml. Can anyone offer advice on this? I feel so close, but so infuriatingly far... Thanks, Daniel Hey everyone, im having a problem. I am trying to get a picture fixed at the bottom of the screen and am stuck. Do i do it as a footer or do i do something else? Can anyone help me please cheers. |
|||||||