CSS - Chrome / Safari Font Sizes

PHP Code:
#searchBox {
    float:right;
    margin:0em;
    padding:0em;
    margin-right:0.2em;
    clear:right;
    background-image:url(/images/site/backgrounds/searchBox.jpg);    
    /*border:black solid 1px;*/
}
#searchBox input {
    margin:0em;
    padding:0em;
    background-color:#d2c5a2;
    
}
.submit {
    background-color:#6F5F42;;
    color:#483e2b;
    font-size:smaller;
    font-weight:bold;
    margin:0em;
    padding:0em;
} 





and html

PHP Code:
<div id="searchBox">
            <form action="search.php" method="post" style="margin:0em; padding:0em;">
                <fieldset style="border:1px solid #a29383; margin:0em; padding:0.1em;">
                    <label>What are you shopping for?</label><input type="text" name="search" size="14"/>
                    <input class="submit" type="submit" name="submit" value="Search" />
                </fieldset>
            </form>        
        </div> 





i dont know but for some reason in firefox the three elements of form (label, input & submit) are on the same line but in IE they are in two lines.. I have just tried width:55%; but the submit box goes outside the top box.. but in FF the searchbox goes haywire and take the whole box!!

also is there anyway to make sure that the font sizes are same/similar in both IE and FF?

http://www.zahra-zahra.com/fullpage.html


EDIT: to say i have tweaked it and firefox problem is solved but IE still puts the form OUTSIDE The box..

Hi there,

I have two font sizes: 22px and 12px. However, If I use the 2 sizes next to each other, the large pushes the smaller on down. I tried to use vertical-align: middle to center them vertically, but it didn't work.

How can I center them vertically?

Thanks!

Good Day,

Trying to setup the font sizes for my site. In higher resolutions, everything seems to look acceptable. When I view the page on a low resolution screen, everything seems ridiculously large. Is there anyway to set the styles up to relieve this problem?

Best,
Colin

heres my currently working on site it look great on IE, Firefox and opera but i just see a blank page in Chrome and Safari!!

web site:
macmillanpc.host56.com/Dreamy_Elegance_template/


please help me! :/
check source, the css is in there (not linked)
these is really f... me off.

Sorry if its too vague, let me know if you need more details.

on my page http://tampabay-online.org/cetr/news/

the left side :

Code:

.content {
	position:relative;
	width:300px;
	margin-left: 155px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

and the two on the right are :

Code:

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

#sidebar {

	position:absolute;
	width:200px;
	top:400px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

If someone has a their font bigger on the artists section then the div will grow and go under the sidebar div.

Any way to make these relative or fix that problem?

Thanks!

Hi All,

I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b".

I can't post links so the website is www (dot) authenticimpressions (dot) com

I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out.

What other information should I post or provide to get some help?

Thanks in advance, I really appreciate it.

Hi,

If you check this site out with Google Chrome or Safari, you'll see (just below the header) the mid-section is offset to the right.

http://www.ergopro.com/

I noticed if I remove the "Icons" div everything is okay, but I need it there. I tried adjusting it, but no dice. Any ideers?

Much thanks in advance.

Hi All,

I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone).

The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK).

The CSS for the element is:

CSS Code:
Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;}

  

 .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;}


 .keybox img{float:left;width:35%;padding:0px;margin:0px;}


 .keybox div{float:right;width:60%;padding:1%;}


 .keybox div ul{text-align:left;margin:0px;padding:0px;} 

The html for the element is:

html Code:
Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div>

  

<div class='keybox'>
<img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> 
<div>
<h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares
</a></h2>
<p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> 
<ul> 
<li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> 
<li><a href='/parts/volvo/'>Volvo Spare Parts</a></li>
<li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li>
<li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li>
</ul> 
</div>
</div>

The image stretches - it works fine on firefox and IE8.

The web address is www.wellandpower.net

There are 3 of these html elements on the left hand side of the page.

TIA

Regards

Charlie

Hello all, I am having trouble getting my site menu to display properly in chrome and safari. In chrome and safari the menu link are raised higher up in comparison to firefox and IE.

Here is my site: Well I guess I can not link my site, but hopefully someone can still help me.


Here is my code: Quote:
/* Tabs ==================== */

#homepagetabs {
border-bottom: none;
margin-bottom: 10px;
padding-left:170px;
height:51px;
background:transparent url
}

#homepagetabs li {
display: inline;
list-style-type: none;
margin-top: 14px;
border: none;
border-bottom: none;
float: center;
line-height: 14px;
margin-right: 8px;
text-decoration: none;
cursor: pointer;
color:#fff;
background: none;
font-weight:bold;
font-size:12px;
}

#homepagetabs li.currenttab {
margin-top: 14px;
background: none;
border: none;
border-bottom: none;
font-weight:bold;
color:#fff;
font-size:12px;
text-decoration:underline;
}

#options_69 th {
font-size: 100%;
}

Hi,

I have an image slider made by another coder. The arrows on the image slider work fine in every browser except chrome and safari where the button isnt clickable (even though you can see it).

Here is a link:
http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=13

This is the CSS for the buttons:
Code:

span#prevBtn{
float:left;
margin-top:-100px;
margin-left:10px;
*margin-left:0px;
background: url(images/previousarrow.gif) no-repeat;
z-index:10000;
}
span#nextBtn{
float:right;
margin-right:-15px;
*margin-right:0px;
margin-top:-100px;
background: url(images/nextarrow.gif) no-repeat;

Could anyone help shed some light on why this may be happening?

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 am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome.

IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off.

Any ideas how to fix this issue?

Thanks!

[EDIT]
I meant Safari and Chrome not Safari and FireFox 3.

Hello all,

I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster.

Thanks in advance.

This could have been posted in the DHTML forum, but I'm guessing the problem is with my CSS bits rather than the DHTML as such so I'm posting here.

I've created a 'working' overlay for a page which has quite a bit of AJAX interaction. The connection the page will be used on is quite slow so I pop up a full screen table with 50% transparency to dim the main page, and the table has a box in the middle informing the user that the page is doing some work in the background.

This works great in IE and FF, but in Chrome and Safari the overlay seems to be preventing any interaction with the pages WHEN IT IS HIDDEN.

This is the correct/desired behaviour when the overlay is displayed - ie when the comms with the backed are happening I don't want the user to be able to push any other buttons or edit any other form elements - but when the layer is hidden (CSS = visibilty: hidden; display: none the layer still seems to prevent the user from clicking any of the controls (buttons, text fields, links etc).

The reason I think it is the overlay layer doing this is that if I double click anywhere on the page, the area that 'working...' overlay displays in when it IS displayed becomes selected/highlighted.

Is this a webkit oddity or am I doing something wrong?

(To display the overlay I just switch the CSS of that particular DIV to "visibility: visible; display; block", but I have also tried "display: inherit;" and "display: inline;").

Thanks,

FM