Safari 7.0 css alignment issue?

Hi,
In safari 5.1 everything is working fine,but in safari 7.0 alignment is changing,please tell me the solution to over come this.

@media screen and (-webkit-min-device-pixel-ratio:0)
.search .sr-btn{border:0; font-size:0; height:49px;position:relative;top:-49px; width:49px; display:block; float:right; background:url([[pix:theme|images/search]]) repeat-x; cursor:pointer;}
above following code is working properly in safari 5.1,but in safari 7.0 alignment is changing in safari 7.0 ,let me want to know the procedure to resolve this issue.

Similar Messages

CSS Layout issue!! Help Urgent!!

I am having a problem with creating a css layout, in the past i used tables and am trying to convert my sites for my customers. I have layed out the website using divs and css and it looks great until i put in the cosing of the menu bar. when i put in the coding for the menu bar suddenly the bar has a padding around it but i cannot find a padding that would change this in the css coding. I need this done asap! so please help. ill show my coding below:
this is the div coding:
<div id=Nav>
   <ul class="dropdown" id="Bar"; width: 879px" name="Bar">
         <li class="style16" style="width: 161px; height: 22px">
   <a href="default.html" style="width: 146px">Home</a></li>
         <li class="style10" style="width: 169px; height: 23px">
   <a href="about.html" style="width: 153px">About</a></li>
     <li class="" style="height: 31px; width: 175px; left: 0px; top: 0px">
   <a href="Equipment.html" class="style18">
   <div class="style10" style="width: 156px; height: 20px;">
    Equipment</div>
   </a> <ul class="sub_menu">
            <li><a href="compressor.html">Air Compressors</a></li>
            <li><a href="compactions.html">Compaction</a></li>
            <li><a href="concrete.html">Concrete Equipment</a></li>
            <li><a href="forklifts.html">Fork Lifts</a></li>
            <li><a href="generators.html">Generators</a></li>
            <li><a href="groundthawing.html">Ground Thawing</a></li>
            <li><a href="heaters.html">Heaters</a></li>
            <li><a href="scissorlifts.html">Scissor Lifts</a></li>
            <li><a href="boomlifts.html">Boom Lifts</a></li>
            <li><a href="lighttowes.html">Light Towers</a></li>
            <li><a href="misc.html">Misc.</a></li>
            <li><a href="dirtequipment.html">Dirt Equipment</a></li>
            <li><a href="powertools.html">Power Tools</a></li>
            <li><a href="pumps.html">Pumps | Saws | Welders</a></li>
                 </ul>
         </li>
         <li style="width: 165px"><a href="locations.html">
   <div class="style10" style="width: 154px">
    Locations</div>
   </a>
           </li>
             <li style="width: 180px"><a href="contact.html">
   <div class="style16" style="height: 24px">
    Contact Us</div>
   </a>         </li>
        </ul>
</div>
This is the css coding:
#wrapper {
width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #f4f4f4;
#Navigation {
background-image: url(Images/NAvigation%20BAr.jpg);
background-repeat: no-repeat;
width: 880px;
visibility: visible;
height: 3-px;
vertical-align: top;
Nav {
vertical-align: top;
margin: 0px;
padding: 0px;
clear: both;
height: 20px !important;
#wrapper1 {
width: 876px;
margin-right: auto;
margin-left: auto;
color: #F4F4F4;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#Bar {
background-repeat: no-repeat;
width: 880px;
height: 28pt;
overflow: visible;
background-image: url(Images/NAvigation%20BAr.jpg);
position: relative;
vertical-align: top;
#container {
width: 880px;
color: #000;
background-color: #EDEDED;
dominant-baseline: 578px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#content {
float: left;
color: #090;
width: 580px;
padding-right: 6px;
background-color: #033;
margin-top: 20px;
.container {
color: #000;
background-color: #ff6;
width: 876px;
#expect {
height: 164px;
width: 294px;
float: right;
position: relative;
background-color: #C90;
margin-left: 582px;
padding-top: 10px;
#hours {
float: left;
height: 55px;
width: 294px;
line-height: 4px;
word-spacing: normal;
white-space: normal;
display: inline;
letter-spacing: normal;
padding-top: 10px;
font-size: 13pt;
color: #000;
margin-left: 586px;
background-color: #F99;
#footer {
height: 76px;
width: 880px;
background-color: #CC0;
clear: both;
#cards {
float: right;
height: 31px;
width: 294px;
margin-left: 582px;
padding-top: 10px;
background-color: #F36;
#contact {
float: left;
height: 328px;
width: 293px;
word-spacing: normal;
white-space: normal;
line-height: 1px;
color: #000;
display: inline;
font-size: 14pt;
background-color: #FFF;
padding-top: 10px;
margin-top: 20px;
#header {
background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 885px;
height: 126px;
background-color: #000;
margin-right: 2.5px;
margin-left: 0px;
#wrapper #container #contact p strong {
color: #800000;
font-size: 14pt;
#wrapper #container #contact blockquote p a {
color: #000;
#wrapper #container #expect div {
color: #900;
font-size: 14pt;
font-weight: bold;
#wrapper #container #hours div {
color: #900;
font-size: 14pt;
font-weight: bold;
#box2 {
background-image: url(Images/Option%201/Services/whitebox2.jpg);
#box3 {
background-image:url(Images/Option%201/Services/redbox2.jpg);
background-repeat:no-repeat;
background-position: center center;
#gold {
background-image:url(Images/Option%201/Logos/gold.gif);
background-repeat:no-repeat;
#white {
background-image:url(Images/Option%201/ProQuip-Pics/box1.gif);
background-repeat:no repeat;
#forklift {
background-image:url(Images/Option%201/ProQuip-Pics/34-01-4380.jpg);
background-repeat:no-repeat;
#scissorlift {
background-image:url(Images/Option%201/ProQuip-Pics/jlg-scissor-lifts-21.jpg);
background-repeat:no-repeat;
/* Navigation Menu- Level one */
ul {
list-style: none
ul.dropdown {
font-size: 13pt;
color: #000000;
height: 25px;
text-decoration: none !important;
width: 860px;
position: relative;
vertical-align: top;
ul#Bar.dropdown {
width: 878px;
position: relative;
vertical-align: top;
ul.dropdown li {
font-weight: 600;
float: left;
zoom: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
display: block;
width: 175px;
color: #000000;
top: 25px;
text-decoration: none !important;
text-align: center;
ul.dropdown a:hover {
color:#cc0000;
ul.dropdown a:active {
color: #000000;
ul.dropdown li a {
display: block;
border-right: 1px solid#333;
color: #000000;
border-right-width: 1px;
text-decoration: none !important;
text-align: center;
ul.dropdown li:last-child a {
border-right:none; /* does not wotk in IE */
text-decoration:none !important; }
ul.dropdown li.hover,
ul.dropdown li.hover {
color: #000000;
position: relative;
height: 28px;
top: 0px;
ul.dropdown li.hover a {
color:#800000;
/* Level Two Navigation */
ul.dropdown ul {
width: 180px;
visibility: hidden;
position: absolute;
top: 100%;
left: 36%;
display: block;
float: left;
color: #000000;
text-decoration: none !important;
height: 25px;
ul.dropdown ul li {
font-weight: normal;
color: #000000;
border-bottom: 1px solid #ccc;
float: left;
border-bottom-color: #c0c0c0;
border-bottom-style: groove;
display: block;
background-color: #dbdbdb;
text-decoration:none !important;
/* IE 6&7 needs inline block */
ul.dropdown ul li a {
border-right: none;
display: inline-block;
height: 18px;
line-height: 16px;
color: #000000;
width: 100%;
text-decoration: none !important;
/* Level Three Navigation */
ul.dropdown ul ul {
top: 100%;
color: #000000;
text-decoration: none !important;
ul.dropdown li:hover>ul {
visibility: visible;
color: #000000;
top: 30px;
text-decoration: none !important;

I have the site using tables up and running, this is a website for a client so I cant make a test site using that domain would it be ok if I screen shot'ed the problem?
Date: Thu, 24 Apr 2014 12:19:44 -0700
From: [email protected]
To: [email protected]
Subject: CSS Layout issue!! Help Urgent!!
    Re: CSS Layout issue!! Help Urgent!!
    created by Jon Fritz II in Dreamweaver support forum - View the full discussion
Well, you're not using position:absolute, so you've got a big thumbs up from a bunch of us for that.
Is there any chance you could post a link to this page on your server? It's much easier to troubleshoot from a browser than it is to rebuild the page from code fragments.
If you haven't gone live with the page yet, create a folder called TEST in your site and save copies of the page and css there. Upload TEST and post a link to it here. Once the problem is found/fixed, delete TEST from the server.
You can also attempt to use Firefox or Chrome to find your issue by right clicking > Inspect Element. All CSS that affects a given element will be displayed with file name and line numbers there.
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/6327947#6327947
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/6327947#6327947
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/6327947#6327947. In the Actions box on the right, click the Stop Email Notifications link.
           Start a new discussion in Dreamweaver support forum at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

Safari 5.1 css/html anomalies

This is really for the apple developers. Please fix the css render issues that other browsers are fine with. Are you guys using W3C standards?
Anyways I found this:
- problems with table cell top alignment with image align and text.
Notice the the first line of text is top align with the image?
the <img align="bottom"> with the <td valign="top">... The img align is ignored.
The css versions are also ignored.
I'll post more when I find more or if any of you guys notice anything else weird, please post.

I know Carolyn but the problem is related to Safari 5.1
The web apps are more or less web sites using the same technologies html css and javascript
and I would not like that future updates of IOS Safari will have the same problems.
ciao.

More alignment issues

hi,
I'm hardly an expert - but I have made great strides because of helpful people who throw me a hint.
my site: www.kirarmerica.com
I still have JUST a FEW alignment issues. I like to have everything centered, so now I am just down to my spec sheets.
I know that they might not be configured ALL the same, but I am hoping I can change a few things
please look at Kira America | Products
click on any spec sheet and you will see that the headers menu and sometimes the footer stays centered, but the spec info jumps to the left of the page.
I've found the correct .css to edit. but I cant quite figure out how to align the columns vertically on the page.
for example if I put a margin on #right_column it put it in the right spot, but then the rest of the content jumps all over the page.
any hints would be helpful!

These changes will center content in white area
#container h1, #container h2, #container h3, #container h4, #container h5, #container h6 {
    border-bottom: 1px solid #DEDACB;
    padding-bottom: 8px;
    text-align: center;
.excel214 {
    border: medium none;
    color: #000000;
    font-family: Calibri,sans-serif;
    font-size: 11pt;
    font-style: normal;
    font-weight: 400;
margin-left: auto;
    margin-right: auto;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    text-decoration: none;
    vertical-align: bottom;
    white-space: nowrap;

Alignment Issues between dreamweaver and browser

Hi
Hoping someone can help, i'm trying to learn how to make
better sites with advanced tools like apDIV's but seem to be
running into an alignment issue. When I make the html file in
dreamweaver I seem to have to off set the images and div tags
inorder for the site to show up aligned properly in firefox,
explorer, etc. I'm thinking there might be a problem in the actual
code causing this but am not good enough yet to find it or the
problem, any ideas or guidence would be greatly accepted. below if
the links work is the difference I see between dreamweaver and when
its launched in a browser.
DreamweaverScreen
BrowserScreen

> over a centered frame
You are not using frames - that's a table.
Yes - there's a way to do this, but it will involve your
working in code.
Make your page left aligned by removing any centering.
Then position your layer so that it is properly located over
the table.
Change this -
</head>
to this -
<style type="text/css">
#wrapper { width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser
window without */
/* horizontal scrollbars. */
</style>
</head>
(you may need to adjust this width so that it's consistent
with the width of
your centering table)
change this -
<body ...>
(the ellipsis represents any other attributes that might be
mentioned in the
body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
and see if that helps.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Vinx21" <[email protected]> wrote in
message
news:ge9t3e$92s$[email protected]..
> thanks for the help osgood, I see now what my problem is
and am just
> wondered
> if there was a way to place the absolute layer over top,
in the right
> position,
or will have i have to remake one of the elements a
> different way???
>
> thanks again, dave
>

OBIEE 11g Calendar alignment issue

Facts: OBIEE 11g - 11.1.5 on Windows 2003 server.
There's an alignment issue going on with OBIEE calendar, wich happens only when the month is october. For all other months, the calendar is displayed properly. It does not depend on the year. You may change the year and select October, you'll get the error.
You might see what happens on the link below.
http://img210.imageshack.us/img210/7876/firefoxds.jpg
This behavior may occur when using IE9 (both using compatibility mode or not), Mozila Firefox and Google Chrome.
I've looked over Metalink and the forums and could not find any information about this error.
Any tips?!
Thanks!
Marcos
Edited by: BI_Creation on Dec 1, 2011 11:37 AM
Edited by: BI_Creation on Dec 1, 2011 11:40 AM

Hi there. Does anybody noticed this issue on calendars?! That only occurs when the month is october....
Just updating, the correct version of OBIEE is 11.1.1.5.0.
Thanks in advance.
Marcos

After installing IOS6: after erasing the history of Safari, the next time I fire up Safari, I see a split-second of the last displayed screen of Safari. Not a big issue but it should not be that way.

After installing IOS6:
After erasing the history of Safari, the next time I fire up Safari, I see a split-second of the last displayed screen of Safari.
Not a big issue but it should not be that way.

Download a new copy of the Firefox program: http://www.mozilla.com/firefox/all.html
Trash the current Firefox application to do a clean reinstall.
Install the new version that you have downloaded.
Your profile data is stored elsewhere in the [http://kb.mozillazine.org/Profile_folder_-_Firefox Firefox Profile Folder], so you won't lose your bookmarks and other personal data.

Alignment issues in my smartform

Hi Gurus,
I am facing alignment issues in my smartform .
My Output with LP01differs from that of Logica Printer LOCAL.Kindly throw some light on the same.
Deepak

Hello,
Please check with the basis that FONT that you are using are installed in both the printers.
This situation happens most when you have imported a new font into SAP system, as a printer is not configured for that Font output differs.
Thanks,
Jayant

Does Safari have a css property to emulate IE's disabled vertical scrollbar

Hi,
Does Safari have a css property to force the always-on disabled Internet- Explorer-type scroll bar like Firefox has? The site design needs to plan for the scroll bar width anyway, and I don't want the screen jumping left and right when the scroll bar activates and deactivates. I also don't want to use the active scroll bar by setting lengths to height plus one.
Thanks!
Thanks!

This isn't about the css standard. I agree that IE is a huge impediment to progress on the Internet as a whole. Having scroll bars showing by default or not is a browser design choice.
Firefox and Safari have initially chosen to hide them by default, and have them visible only when content exceeds page length. I used to think that was the "right" way. I, and many others, now realize that IE has it right. The advantage is the page doesn't jump around depending on content. The designer must compensate for the possibility of a scroll bar in the design anyway. Firefox has recognized the validity and widespread support for this position and has since incorporated a proprietary css property to render the disabled scroll bar. They separate their properties by prefixing them with moz to circumvent conflicts with what may become a W3C standard property in the future. My question is whether or not Safari has any means available to web developers that enable them to display an inactive scroll bar yet.
Thanks!

SAP script printout alignment issue

Hi Experts,
I have facing one Script Printout Alignment issue.
SAP Script Form printing some Values in Table format.
While debugging( in debug mode ), I am getting the correct Alignment ( Proper table format with values ).
But in printout the Alignment( The vertical and horizontal lines are not printed properly ) is not correct.
Thanks in Advance.

HI Glen Anthony,
I am not using any printer details.
from the Spol (SP01) I am checking the print priview.
Success in debug mode but not in Print.
Please suggest.
Thanks

Alignement issue when exporting to PDF

Hello,
I'm having some alignment issues when exporting an InDesign file to PDF.
I have a couple of square pictures, touching eachother at the edges. These are aligned bang on in InDesign (the lines overlap), but when exporting to a PDF and viewing in there, it seems that some seem to jump up slightly.
Is this just a display issue or a setting issue when exporting to PDF?
Thanks
Benny

The detail is cropped too tight for me to tell how many photos are intersecting there. Is there a vertical intersection as well? If not, I think you're looking at a very slightly non-rectangular frame, if there is, then you might still be looking at a non-rectangular frame, or the frames are not perfectly aligned, which doesn't surprise me if you snapped to a guide -- I find that less than 100% reliable since CS6.
Presuming that you've zoomed in to show us the problem, that's probably a single pixel misalignment and you'd be very hard pressed to see it in printed output without a loupe.
You can check the bottom edge of the top photo, and the top edge of the bottom photo(s) for being out of horizontal by using the direct select tool to select the corner points and seeing if the y-coordinate is the same on both sides of the frame.
My printer tell me to always overlap frames, rather than butting them, for trapping, for what that's worth, but I don't always do what he says, and I've never had a problem.

CS5 HDR pro two photos alignment issue

Although I really enjoy the new tool, I'm having trouble aligning two photograph when I open then through the HDR pro tool.
Why is alignment of two photos so bad in HDR pro and perfect if you align the two same photos as two layers? I've even tried reopening the same files over and over and get different results each time in HDR pro.
In view of this, shouldn't there be a realign button in the slider adjustment screen, or options for alignment, such as Use the regular auto-align?
Since alignment works fine with layers, is it possible to have an option to use layers as a starting point for HDR pro instead of opening saved photos only? I realize this probably might not give perfect results as just fixing the automatic alignment issue...
But hey, I'm just trying to find a workflow around this if I didn't have my tripod with me at time of shoot... and I shot only two photos to composite.

Hi Chris,
thanks for looking into this matter. Where do you want me to send the files (over 50 megs zipped).. they're CR2 files...
Date: Fri, 28 May 2010 14:38:51 -0600
From: [email protected]
To: [email protected]
Subject: CS5 HDR pro two photos alignment issue
Don't know what could be going wrong. Can we get the files so we can try to reproduce the problem here at Adobe?
>

Colour alignment issues with CP1515n

I'm having some colour alignment issues with my Color Laserjet CP1515n. Lately, I've noticed that the 3 colours go out of alignment from the middle towards the right of my printouts. Alignment at the left towards the middle half of the page is ok but gets progressively worse towards the right side of the page.
Nothing in the user interface allows me to reset the colour alignment. What can be the cause of this and what's the remedy? This printer is slightly over a year old and has only just gone through its first set of toner cartridges.

I am also having alignment issues to the same nature as the post below. I have just replaced the Black, Magenta and Cyan toners. After doing this the alignment goes out of register from left to right (left edge fits right edge all colours are out of fit by 2mm).
I have also found nothing in any manuals as to how to adjust or fix this problem. This is the second time I have replaced these colours. I have re-calibrated and taken the cartridges out several times but it is still the same.
Any advise would be helpful. As it is at the moment the printer is unusable for my job and it's the only one I have.

ALV Grid - Alignment Issues in TOP OF PAGE.

Hi,
We have a requirement to right align text in the report header.
We are using REUSE ALV GRID DISPLAY, but using TOP-OF-PAGE event - the whole text is left aligned.
I tried using Class CL_DD_DOCUMENT which solved the alignment issue, but I am not able to see the header while printing/downloading to excel.
I want the header to be available while downloading/printing the list. Any suggestions?
Thanks in advance,
Harveen.

Hi
The ALV download only the grid into the file, so not the data you're writing in TOP_OF_PAGE event.
If you need to do that, you should create an your own buttom to download the file.
Max

Printing alignment issue

Hi,
I am using inDesign CS3 on Windows XP. On the computer screen, my layouts look exactly how I want them to. However, when I print my document, the alignments are not correct. In particular, the master page spread seems not to line up with marks that I have made on individual pages. How can I fix the alignment issue?
The printer is a HP Laserjet 9000 dn -- an industrial strength behemoth.
Thanks,
Liat.

The master page content seems to be off by a millimeter or so when I print.
The "marks" I've drawn on the actual pages are lines and rectangles. These lines and rectangles are drawn so that they fit within certain areas of the master page content. When I print, the lines and rectangles are 1-2 millimeters off from where they are supposed to be with respect to the master.
In particular, my master page contains a theater seating chart. On the individual pages themselves, I "highlight" a certain seats in the chart by drawing a gray rectangles over these seats. When I print, these rectangles are shifted 1 mm to the left, and no longer fully "cover" the seats they are supposed to, making my publication look a bit sloppy.
Besides this 1-mm alignment issue between the master content and the content on individual pages, all other content is printing just fine.
I do not think that this is an issue of the page position in the print dialog box, since that would make a drastic alignment problem, not one as small as I am getting.
I thought about converting to PDF, but: I am printing my document as a booklet. I am working with 2-page spreads, each page being 8.5 by 5.5 inches. I have been using inDesign's "print booklet" function (2-up saddle stitch) to print my double-sided booklet. I have not yet figured out how to either (1) print PDFs as booklets or (2) export my inDesign document to PDF so that all the booklet-printing properties are preserved (i.e. page order, etc.), so that I can simply print the PDF normally.
I think you're right that PDF might be the way to go, since usually PDF's talk to printers better than inDesign seems to.
Thank you,
Liat

Safari 7.0 css alignment issue?

Similar Messages

Maybe you are looking for