I'm not good at all this website creating. But i need my web portfolio for graphic design. So i created template on photoshop. Sliced it. And saved for web. Then i opened it in Dreamweaver. All i did rollover for my buttons. And here how it looks in IE
stormilloart.com
check it in Opera, Safari, Firefox - looks perfect. But in Internet Explorer ist all messed up. Maybe there is a fix. Please help me out.
When you put images inside anchor tags, IE adds border around it. But Photoshop takes exact width and height of the sliced images. Because of the border added around the images, it creates layout issue.
To fix this, remove border around images inside anchor tags.
Add following code in head section.
<style>
a img {
border-width : 0;
}
</style>
Related
i put iframe of Bandcamp embeded player on my website, but the background-image of my track look blurry.
i made this cover in Illustrator in 2400x2400 and i exported in Png24.. When i look the background image in Bandcamp the image seems in good quality.. i dont understand what to do to view the cover in my website in good quality.
you can see it in https://mauditemachine.com/
i tried to see what happened if i change the background-image to 1 instead of 8
<div id="art" class="item" style="background-image: url("https://f4.bcbits.com/img/a2126636077_8.jpg");"></div>
i see a better quality but i cant force it..
when i tried to change the size to 400x400 in the iframe code i have better results but i want to have 300x300 sizing.
i just change iframe parameters to select 100% for width and height.
In my Css i put width and height to 400px to a container above and for responsive design i put 300px
I am building an AureliaJS based application which contains a SVG based component. My problem is that in MS Edge, the gradients of this SVG are not rendered (see image below: the "gauge" is supposed to be transparent and the two circles green). It is correctly displayed in all the other browsers I tested (FireFox, IE11, Chrome).
The gradients are defined inside the SVG in a defs section. They are then used by their ids.
I tried:
To open the SVG part of the component as an SVG file in Edge. Strangely it renders correctly. So I guess the SVG is correct.
To remove the Aurelia markup: the problem is still here.
To change the value of fill (currently fill: url(#gauge-fill-2)) into fill: url('#gauge-fill-2') or fill: url('/#gauge-fill-2') without success.
I also get the message below in the console, which disappears if I remove this SVG (I translated it from French as I have a French edition of Windows 10)
XML5633: The name of the ending tag doesn't match the name of the starting tag.
Line. 60, column 7
However, when I read the code, I couldn't find any problem about closing tags. To be sure of this, I remove most of the code and left only one element with a gradient on it. This message was still there.
The full code of the component is available here: https://bitbucket.org/arenaoftitans/arena-of-titans/src/9f5f70ff3fc71832bcac90ce0dcc5204a471b095/app/game/play/widgets/gauge/gauge.html?at=master&fileviewer=file-view-default
Any idea of what the problem might be and how to solve it?
The problem is solved by the creators update. I just need for it to be widely deployed.
I am seeing a strange issue in Safari 10 that may be present in earlier versions. When SVG content is present in the document along with a content editable div the text is disappearing. This happens mostly when selecting text, but also while toggling the display property of the svg content. Here are a few videos showing the behavior: http://www.screencast.com/t/CeyFqYyfeFZW
http://www.screencast.com/t/eRAGsopA
I can't make the application available publicly. We have a pretty complex document composition layer which is probably to blame. I'll try posting an isolated test later. I have only observed this issue on Mac OS X Yosemite (10.10.05). iOS seems to be fine. If anyone has seen this issue before please let me know. Thanks!
After a bunch of tests I figured out that in this particular example the problem is caused by the situation when editable text has higher z-index than image (raster or svg). Image can be placed anywhere, but not geometrically below the text. This issue also is specific to Safari 10+. Testing the original example in 9.1 everything works.
I have created a simple example testing z-index https://jsfiddle.net/xngmocxm/9/
There is a background element, which is jpeg, it has z-index = 0, 2 svg path elements (grey and red), 2 editable text elements and svg image (HomeSmart in the top left corner).
Z-index of the left text element is set to 30, right one has z-index 20, svg image z-index is set to 25, i.e. in between 2 text elements. In test browser I can see that in this case only the left text disappears, right one is shown and selected just fine.
So the svg that is above the text does not manifest the issue, but if the SVG is below the editable text this issue occurs.
If image content is jpeg, it also causes same issue:
img src https://jsfiddle.net/xngmocxm/12/
Anyway I was able to fix this by setting overflow to hidden on image wrapper of the problematic image element. I think this a is Safari bug and not intentional behavior.
Please can someone help?
I need to drag and drop small spot circles representing room sensors onto a floor Layout rendered inline (binary) into the browser.
How can I achieve this.
Download the SVG, add points via SVG program (for example InkScape), upload the SVG again.
If the SVG is displayed completely as a file in your browser (i.e. the URL ends with ".svg" or something like that), so the browser handles the drag and drop, which probably isn't implemented to work with SVG in any way, as your browser is probably not layed out to edit SVG files.
If the SVG is embedded somehow into an HTML site you might have a chance if you use JavaScript or something alike to edit the SVG in the browser, implying you can change the JavaScript on that site because you can access it or have a plugin for that.
Oh yeah, maybe there is a plugin for your browser to edit SVGs, who knows?
I'm using raphaeljs to create an app allowing people to customize doors. I'm basically separating the sections of the door and using raphaeljs to draw them via a path, then filling this path with the corresponding image.
This is my code that draws the door.
function drawDoor(style, color){
door = paper.path(door_paths[style].path).translate(105, 93);
door.attr({ fill: "url(images/door/"+style+"/"+style+"_"+color+".png)", stroke: 0 });
door.node.setAttribute("class","door");
door.click(element_click);
}
This works great in all browsers except Safari. It seems to draw the path fine, but when you scroll the page the image scrolls as though it is fixed to the background, the path act as a mask.
I've recorded a short video to demonstrate this, you can see it on vimeo here http://vimeo.com/24539065
This happens with both pngs and jpg, and I have tried removing my translate from the draw function but no luck. I have also ruled out css issues by removing my stylesheet.
Any suggestions would be appreciated, thanks.