CSS - Float Right Displaced Below In Ie...help! I Run Out Of Ideas!

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
 filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;    
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
} 





here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div> 





I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.

I have implemented a CSS dropdown menu and in FF3.05 on my PC if there are links in the top part of the content area Im unable to click on them. This is not a problem in IE for once it is just strange behaviour in FF.

Check out the site and issue he http://dewinter.com.au/plans/index.php

There are 3 links in the top of the content that Im unable to access, Contact and Single and Double plans..

Any ideas would be great.

Hello,

I've been teaching myself css code for the past four days, and I almost have my website exactly the way I want it to look except for one thing. I have a three column layout and my right column always jumps under everything when the browser is re-sized. It only seems to work how I want it to in Safari. I've tried a ton of different things, and nothing seems to work, but I am a real novice. If you could help, I'd really appreciate it.

Here is my css code:

body { background-image: ( address blocked: See forum rules);

margin: 0px;
padding-left: 8%;
padding-right: 8%;
padding-top: 10px;
background-attachment: scroll;
min-width: 1000px;
}

#header {
background: #00ff00;
background-image: (address blocked: See forum rules);
width: 100%;
height: 125px;
background-repeat: no-repeat;
margin-bottom: 5px;
border-style: ridge;
border-color: black;
min-width: 1050px; }

#leftcol {
background-image: ( address blocked: See forum rules);
float: left;
width: 14%;
height: 722px;
border-style: ridge;
border-color: black;
min-width: 145px;


}
#rightcol {
background-image: ( address blocked: See forum rules);
width: 12.5%;
height: 722px;
border-style: ridge;
border-color: black;
min-width: 142px;
overflow: hidden;
position: inherit;
}

#content {
background: #fff;
float: left;
width: 70%;
height: 722px;
border-style: ridge;
border-color: black;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
min-width: 735px;
}
#footer {
background: #660066;
clear: none;
width: 1050px;
height: auto;
border-style: ridge;
border-color: black;
margin-top: 5px;
position: absolute;
}

Hi

i have a content div inside a container div, the content in the content div stretches automatically but the container div doesnt stretch to accomodate the bigger content div....is it possible to get it to stretch the same as the content?

the only solution ifound was to fix the height and set the overflow to auto so that i get a scroll bar but that looks rubbish ;o(

cheers
Andy

I need some people to bounce ideas off of. I am having a real hard time coming up with a layout that is accessible and fits my layout.

The form is very simple with two radio buttons and a text field. What I want is for the two radio buttons to display as a block but fit in a tight spot and the text field to float to the right and center if the two radio buttons. Here is a quick photochop of what I am going for.

gary.webb.waptug.org/projects/epls/




Here is a link to the code I am building.

gary.webb.waptug.org/projects/epls/images/search.gif

Notice in the image that I have modified the banner a bit to fit the search form into the bottom dark blue bar.


Thanks in advance.

Hi,

I am new here, altough I have been comming here to search for solutions very often. I am a very great fan of CSS and have developed my own website (for my small bussiness) in pure CSS and XHTML.

Now, when I started developing my website I created a layout. I have stuck with the same layout ever since. This was my idea, altough the layout is used in different ways by other websites.

However something I did a lot was to browse other pure CSS websites. When there was something I liked I tried to recreate it (I never copied what other people did, always re-created myself).

The problem is that I started my website with the following colour scheme; Black, White and Red. After browsing some website I must admit that I did copy coloures from other websites. Again it is only the coloures I copied! All the implementation (CSS, Xhtml, JavaScript is my own) and when there was an image I liked (for example for the borders) I recreated it on my PC.

Now I am asking this question here because you people do CSS websites all the time. I know that some of you have been in this bussiness for some quite time and thus have the best advice on what should I do. Whether to leave my website as it is or else change it (note that I still did not launch my website). My question is related with Ethics as much as with legaility of what I did.

I am giving some extra detail of what I mean by copy the colour scheme and recreating images.

Copy Colour Scheme: Here I used a colour picker tool. I did not copy my colour scheme from just one website, but from various and used them within my layout (My layout is totaly different from the websites of which I copied the colours from).

Recreating images: This has been done for the borders and shading. Again I have taken ideas from different websites. What I did is see how they did it and then recreate it. Sometimes I altered the images to better fit my requirments. However I have some images which I recreated nearly pixle by pixle the same altough I am not using the same image that the websites are using (I have recreated a small part of it).

Now I checked the websites and there does not seem to be any copyright to protect images or colour scheme.

Also I am not planning to insert my website for any competition. I must admit i like the design I have but not really intrested in any awards. I am new to web development and the only reason I am creating the website is because I wanted a web presence.

Again, I have created all the CSS and HTML by myself using also some on-line tutorials. The only thing I see as a problem is the colour scheme and some images.

dd

Hi guys,

I am building a feature block that has a semi-transparent blue strip at the top with white text inside.

I'm using all the various opacity filters (filter:alpha(opacity=70);-moz-opacity:0.7;opacity: 0.7;-khtml-opacity: 0.7 to set the blue strip to opacity of 70% (0.7) and positioning the text over the top of the blue strip so that it doesn't inherit the opacity.

This works fab for everything....except the most recent version of Safari (1.2) which excepts the css3 opacity declaration.

For some reason, the moment I set the text div (.vertical) to have a position value of absolute..or relative, it inherits the opacity value for the div above it, even though it is not a child.

Here's the code:

Code:

<!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" lang="en">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		
	<style type="text/css" media="screen">
		a {
			color: #fff;
			}
		.transparentHead {
			width: 210px;
			height: 102px;
			background: black;
			}
		.transparent {
			background: #4E85C5;
			height: 34px;
			opacity: .7;
			}	
		 .vertical {		
			color: #fff;
			font: 12px verdana, helvetica, sans-serif;				
			position: relative;		
			top: -34px;	
			}
	</style>
</head>
<body>

<div class="transparentHead">
	<div class="transparent"></div>
	<div class="vertical">
		<a href=""><b>Transparent</b> Header</a>
	</div>
</div>
</body>
</html>

Anybody know of a way around this?

Cheers

I'm looking to add some angled corners to my tabs and maybe a bevel. Currently, my tabs are pure css with no js. Any way to angle the corners with css? Or am I going to have to whip out my Photoshop and use some images?

I've checked out alistapart.com and found his code to be too buggy. Any links to some other tutorials would be much appreciated.

NOTE: This is a learning project and NOT a REAL COMPANY

My Site

Hey,
Ive used Macromedia Dreamweaver to design the following site. But for some reason the CSS seems to only work in IE. When I view the page in firefox, the CSS doesnt seem to work properly.

Ive never encounterd this before, and have run out of ideas.
What do you think?

Website Here

Cheers,
Smitch

I'm not entirely sure where to put this, but as it concerns css, and quite possibly jquery, I'll roll it on into this forum.

I'm working on a new site, and I'm not entirely sure as how to handle the links of it, ideally i'd like it to be a 1-page affair as much as possible, so what I thought is that each link would open inside a div.

As you can see by the sketch below, I've a middle column which i dubbed 'SERVICES' that displays various categories of service that I have, hence the 3 centered columns below.

Here's the sketch:


Now at first thought, the 3 Categories would be a dropdown menu in essence, which I thought to make in jQuery, specifically a modified version of this:

http://buildinternet.com/live/smoot...mated-menu.html
Code for it is he http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/

On top of that, on hovering each link in this dropdown I thought to use a jQuery tooltip, that describes the service in brief, and once clicked more details would emerge of the service .. So if you fall back to my sketch, when a link in M1 is clicked, I'd want the details + a form to open in M2, as sketched.

Th problem I'm having is two-fold:
1. I dont have enough JQuery experience to mesh the tool-tip with the propsed drop-down
2. I'm not onventive enough to figure out how to make M1 result in M2 (the sketch yet again! lol)

Please please help me figure out a better way, or a good way to do this!

Fixed.

I'm working on a video blog right now and I REALLY like the way this is set up.

See Gary Vaynerchuk WineLibrary(dot)TV videos

On Gary's videos there are always the Share Links above the video. These aren't part of the player but somehow built into the post template I imagine.

I also imagine aside from the css/html aspect this task of creating the links is being automated but I could be wrong.

Anyone have any ideas on how I could accomplish something similar?

Thanks

I always have trouble with floats. I'm just trying to get these two bulleted lists to display next to each other so that the page is shorter.

It isn't exactly working. Close but not quite. Changing the left margin hasn't helped (even bumped it to 55, but it had no effect.)

<span style="float:left;"><h4>New Listings</h4>
<p>Be prepared with:</p>
<ul>
<li>Sales Price</li>
<li>Property particulars</li>
<li>Company</li>
<li>Address</li>
<li>Your name</li>
<li>Phone number</li>
</ul></span>

<span style="margin-left: 15em;"><h4>Price and Property Changes</h4>
<p>Please state:</p>
<ul>
<li>Price change or any changes</li>
<li>Address</li>
<li>Company</li>
<li>Name</li>
<li>Phone number</li>
</ul></span>

<span style="float:clear;"><h4>Buyer Wants</h4><span>
<p>Describe your buyer's wants and needs. You will have 30 seconds to present your buyer wants.</p>

Thanks for taking the time to read my question.

If I use float: none; in my css the result in IE is perfect. However in Firefox it doesn't work.

Is there a workaround for this?

see "Past Pierced Shows" bottom left corner of page

in IE the images and text line up, in Firefox, they are one under another.

www.pierced.ca/pierced-events.htm

Thanks for the help,

Brad

I almost feel guilty about posting this question, as it has probably been answered in some form before and i just need to figure it out myself, but this is giving me some difficulty. My page displays just how I want it right now to display in Firefox. However, in IE6, it does not display correctly. The XHTML and CSS are both validated and it works perfectly in the more "standard-compliant" browser. But I'm sure there is a way to get this to work in IE as well.

the site is fusiondesign.awardspace.com (new user policy will not let me use links )

the relevant XHTML:
Code:

<div id="container">

<div id="nav">
<a href="#" onclick="changeTab('Home','hcontent');" id="Home">Home</a>
<a href="#" onclick="changeTab('About','acontent');" id="About">About</a>
<a href="#" onclick="changeTab('Services','scontent');" id="Services">Services</a>
<a href="#" onclick="changeTab('Order','ocontent');" id="Order">Order</a>
<a href="#" onclick="changeTab('Contact','ccontent');" id="Contact">Contact</a>
<a href="#" onclick="changeTab('Links','lcontent');" id="Links">Links</a>
</div>

<div id="content">
<noscript>
I noticed you have Javascript disabled. This site will not work correctly unless you have Javascript enabled. Please enable Javascript now.
</noscript>
</div>

...

</div>

and the relevant CSS:
Code:

div#container {
	position:absolute;
	left:50%;
	top:50%;
	width:760px;
	height:332px;
	margin-left:-380px;
	margin-top:-186px;
	border:#FFFFFF 1px solid;
	}
	
div#nav {
	float:left;
	width:170px;
	padding:0;
	}
div#content {
	text-align:justify;
	width:558px;
	padding:1em;
	color:#000000;
	height:300px;
	overflow:auto;
	/*border:#FFFFFF 1px solid;*/
	}

Any direct help or a link to a solution would be greatly appreciated